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

Question

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.

my answer to a similar issue may help you: http://stackoverflow.com/a/36948893/3532945 — brando, May 06 '16 at 02:39

score 5 · Accepted Answer · answered May 05 '16 at 20:09

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": []
}

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

1 Answers1