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.
Well, it turns out the angular library doesn't include TypeScript definitions in the package. TypeScript tried to find the type definitions at the relative path, but they weren't there and you got the dreaded red squiggle.. Traditionally, this is where tsd or typings came into the picture.
Angular packages include them already. TypeScript includes a special declaration file called lib.d.ts. This file contains the ambient declarations for various common JavaScript constructs present in JavaScript runtimes and the DOM. Based on the --target, TypeScript adds additional ambient declarations like Promise if the target is es6.
Many libraries include definition files in their npm packages where both the TypeScript compiler and editors can find them. Angular is one such library. The node_modules/@angular/core/ folder of any Angular application contains several d.ts files that describe parts of Angular.
So if there is a set of types available independent of the package's publisher, by convention you can find them on npm using @types/package-name. For example to download types for angular, you get them by installing the @types/angular npm package. Furthermore, TypeScript understands how to resolve types from the @types directory out of the box.
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": []
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With