TypeScript error in Angular2 code: Cannot find nam

Question

I have defined the following Angular2 component:

import {Component} from 'angular2/core';

@Component({
  selector: 'my-app',
  moduleId: module.id,
  templateUrl: './app.component.html'
})
export class AppComponent {
}

When I try to compile this, I get the following error on line 5:

src/app/app.component.ts(5,13): error TS2304: Cannot find name 'module'.

I believe module.id is referring to the CommonJS module variable (see here). I have specified the CommonJS module system in tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": false,
    "removeComments": true,
    "noLib": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "pretty": true,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitUseStrict": false,
    "noFallthroughCasesInSwitch": true
  },
  "exclude": [
    "node_modules",
    "dist",
    "typings/browser.d.ts",
    "typings/browser",
    "src"
  ],
  "compileOnSave": false
}

How can I correct the TypeScript error?

Answer 1

Two key points:

1. Register typings by running typings install dt~node --global --save. So you'll get the following section in typings.json:

   "globalDependencies": {
       "node": "registry:dt/node#6.0.0+20160608110640"
   }
   

2. Add reference to the new module. Two ways:

   • Directly add a reference to a dependency in your TS

     /// <reference path="../../../typings/globals/node/index.d.ts" />

   • Add typings/index.d.ts in the files section of the tsconfig.json

     {
         "files": [
             "typings/index.d.ts"
         ]
     }
     

See more here.

Answer 2

This is what I did that worked for me on Eclipse(Webclipse)/Windows.

Step 1:

Terminal

$ npm install @types/node --global --save

Step 2:

tsconfig.json

{
  "compilerOptions": {
    ...,
    "types": ["node"]
  }
}

In addition, I had the following dependencies in my package.json, so I was using typescript 2.

  "devDependencies": {
    ...
    "typescript": "~2.0.10",
    "@types/node": "^6.0.46",
    ...
  },

Answer 3

I use VS 2015, and had same issues, but I have resolved using:

1. add the typings.json file from the angular.io website (2.0.0 final at the moment) and the run:

   typings install // don't forget to install typings globally
   

then

npm install -D @types/node --save

in the package.json I have

"devDependencies": {
"@types/node": "6.0.40",
...

2. in the typings.json I have the following configuration

   {
   "compilerOptions": {
       "target": "es5",
       "module":"commonjs",
       "moduleResolution": "node",
       "sourceMap": true,
       "emitDecoratorMetadata": true,
       "experimentalDecorators": true,
       "removeComments": true,
       "noImplicitAny": true,
       "suppressImplicitAnyIndexErrors": true,
       "allowSyntheticDefaultImports": true,
       "types": []
   },
   "exclude": [
       "node_modules",
       "app-dist"
   ]
   }
   

I had to add the types as an empty array

3. check for duplicates, and if moduleId: module.id is still highlighted

p.s. to me personally is a strange issue, because as soon as you exclude typings inside typings.json, you have immediately highlighted 'module', but if you let it in, you have lot's of duplicates. Don't know who to blame, me, typescript or visual studio :)