导入C3和D3时Typescript编译错误

Question

I am playing with the graphing library C3 in an Ionic2/Angular2 typescript project. I have installed C3 via npm , and the type definitions via tsd .

I have imported when into my own ts file as follows..

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import * as C3 from 'c3';
import * as D3 from 'd3';

@Component({
   templateUrl: 'build/pages/graphs-page/graphs-page.html'
 ....
})

All appears fine. I can see the typings for the C3 (and dependant D3), and also when I run everything seems to work.

However, when the application builds (when I run ionic serve ), I always get the following typescript compile errors...

TypeScript error: D:/dev/ionic2/testcomonents/app/pages/graphs-page/graphs-page.ts(3,21): Error TS2307: Cannot find module 'c3'.
TypeScript error: D:/dev/ionic2/testcomonents/app/pages/graphs-page/graphs-page.ts(4,21): Error TS2307: Cannot find module 'd3'.

Does anyone have any ideas why I am getting these errors at build time, when I get no errors in the IDE (I am using vscode ), and everything seems to work fine?

[EDIT]

I have since installed typescipt 2 and run with the --traceResolution flag. I can see that tsc only seems to look under various levels of node_modules and never looks under typings folder, which is where vscode is looking.

More confusing (to me) is how the c3.js source is included, when this is located under the node_modules/c3 folder. I have not specifically added any reference to c3.js , yet the graphs show up.

The settings in the tsconfig.json are

{
   "compilerOptions": {
   "target": "es5",
   "module": "commonjs",
   "emitDecoratorMetadata": true,
   "experimentalDecorators": true
 },

"filesGlob": [
   "**/*.ts",
   "!node_modules/**/*"
 ],
 "exclude": [
   "node_modules",
   "typings/main",
   "typings/main.d.ts"
  ],
 "compileOnSave": false,
 "atom": {
   "rewriteTsconfig": false
 }
}

I have tried various edits in the above tsconfig.json but cannot get it to look in the typings folder.

So my questions now become

1. How to make Typscript look in the typings folder
2. How does the the actual c3.js file located at node_modules\\c3\\c3.js get included in the Ionic bundle (since I have not added a reference to it anywhere)

Answer 1

I think I now know the answer to this, but if I am incorrect, please correct me!

looking in the Ionic file D:\\dev\\ionic2\\testcomponents\\node_modules\\ionic-gulp-browserify-typescript\\index.js , there is the following src property

var defaultOptions = {
   watch: false,
   src: ['./app/app.ts', './typings/main.d.ts'],

so If I add the following to main.d.ts

/// <reference path="globals/c3/index.d.ts" />
/// <reference path="globals/d3/index.d.ts" />

the errors go away.

If I run tsc --traceResolution I still see errors, but my guess here is that running tsc from the command line does not include looking at the above Ionic script or main.d.ts .

To get rid of the error when using tsc --traceResolution , I tried added the following to the file D:\\dev\\ionic2\\testcomponents\\node_modules\\c3\\package.json

"typings": "../../typings/globals/c3/index.d.ts",

and then do the same thing for d3 . But this then causes the following error when I run the Ionic build

TypeScript error: d:/dev/ionic2/testcomponents/app/pages/graphs-page/graphs-page.ts(3,21): Error TS2656: Exported external package
typings file 'd:/dev/ionic2/testcomponents/typings/globals/c3/index.d.ts' is     not a module. Please contact the package author to update the package  definition.  

So, I think in the Ionic context, the correct thing to do is add the /// paths to the main.d.ts file.

The other question I had, ie how is the c3.js etc file included, this is all part of the Browserfity / gulp build, and this examines everything under the nodes_modules folder. They all have the packeage.json file, and, in the case of c3, we have the line "main": "c3.js" .