MichaelOryl MichaelOryl - 6 months ago 67
Javascript Question

Missing TypeScript type definitions for the @Angular packages in Angular 2

Now that I have updated my application to Angular2 v2.0.0-rc.1, I am once again seeing TypeScript compile error/warning messages when my application is being bundled in webpack. The messages come up for any of the

@angular
packages I reference from my TypeScript source files, such as these:

ERROR in ./src/app/app.ts
(1,34): error TS2307: Cannot find module '@angular/core'.

ERROR in ./src/app/app.ts
(3,76): error TS2307: Cannot find module '@angular/common'.

ERROR in ./src/app/app.ts
(4,30): error TS2307: Cannot find module '@angular/http'.


With the earlier beta versions of Angular2, I got around similar message problems with classes like
Promise
and
Map
by including something like this at the top of my
app.ts
file.

///<reference path="node_modules/angular2/typings/browser.d.ts"/>


Is there a
d.ts
file for the
@angular
Angular2 packages that I can refer to to fix the problem? So far it doesn't seem like the
typings
system has anything available:

MFO-Mac:angular2-oauth2 mfo$ typings search '@angular'
No results found for search


Right now I have my TypeScript
tsconfig.json
file configured to target ES6. But if I change it to target ES5 instead, I don't get these
@angular
errors, but I instead get errors for common ES6 classes like
Promise
,
Set
, and
Map
. Here's my file configured for ES6:

{
"version": "1.6.2",
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es6",
"module": "commonjs",
"removeComments": true,
"sourceMap": true
},
"exclude": [
"node_modules",
"bower_components",
"bootstrap"
],
"files": [],
"definitions": [
]
}


I suspect that there are files in
node_modules/@angular
that I could list in the
definitions
section of the
tsconfig.json
file, but I don't currently know enough about how TypeScript typedef files work.

If there is another way to get around this problem, I'd certainly be open to that as well.

Answer

It seems that the TypeScript compiler is smart enough to suss out the files definition files itself if you tell it that you are using Node/NPM style modules.

By adding "moduleResolution": "node", to my tsconfig.json file, the problem messages disappeared and the application continued to work as expected.

Here's my new file (the new addition is the 4th line):

{
  "version": "1.6.2",
  "compilerOptions": {
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es6",
    "module": "commonjs",
    "removeComments": true,
    "sourceMap": true
  },
  "exclude": [
    "node_modules",
    "bower_components",
    "bootstrap"
  ],
  "files": [],
  "definitions": []
}
Comments