Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 613
Michael Oryl Avatar asked May 05 '16 20:05

Michael Oryl


People also ask

Why is typescript not available in the angular library?

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.

Is it possible to add ambient declarations to typescript in angular?

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.

Where do I find the angular definition file?

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.

How do I download types from TypeScript?

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.


1 Answers

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": []
}
like image 119
Michael Oryl Avatar answered Oct 19 '22 14:10

Michael Oryl