TypeScript error in Angular2 code: Cannot find name 'module'

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?

I don't think **module** is something that's provided to you at compile time. — toskv, Apr 18 '16 at 17:47
Well it is compiling correctly for me in [this project](https://github.com/archfirst/angular2-seed-sass/blob/master/src/app/components/app.component.ts). I don't know how!!! So I tried to isolate this in a simpler project and it is not working there. So trying to figure out what is making it work in the first project. — Naresh, Apr 18 '16 at 17:51
You can declare a `module.d.ts` file with the content: `declare var module: any;`. Then reference this file from your bootstrap `/// ` — Poul Kruijt, Apr 18 '16 at 17:52
@yurzui, you nailed it on the head! Can you please write it out as an answer so that I can mark it correct? — Naresh, Apr 18 '16 at 18:01

yurzui · Accepted Answer · 2017-10-10T04:10:31.407

102

Update

If you use Typescript 2^ just use the following command:

npm i @types/node --save-dev

(instead of --save-dev you can just use shortcut -D)

or install it globally:

npm i @types/node --global

You can also specify typeRoots or types in your tsconfig.json if you want but by default all visible “@types” packages are included in your compilation.

Old version

You need to install node ambientDependencies. Typings.json

"ambientDependencies": {
    "node": "github:DefinitelyTyped/DefinitelyTyped/node/node.d.ts#138ad74b9e8e6c08af7633964962835add4c91e2",

Another way can use typings manager to install node definition file globally:

typings install dt~node --global --save-dev

Then your typings.json file will look like this:

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

edited Oct 10 '17 at 04:10

answered Apr 18 '16 at 18:04

yurzui

205,937
32
433
399

4

Two points: 1. Remember to add the reference to the top of your root typescript file thus: /// 2. Editing the typings.json file as shown by @yurzui worked for me but initially I just did this: > typings install node --ambient --save Which updated the typings.json file [with a different version] and didn't work as the index.d.ts file threw scores of errors at transpile time. FYI: I'm using Angular Beta.16 – Bonneville Apr 27 '16 at 16:41
1

@yurzui How do you add a reference to it from your bootstrap? – LEMUEL ADANE Jan 01 '17 at 02:44
2

The command `npm install @types/node --save` fixed this for me – Samuel Slade Jan 01 '17 at 23:33
2

`npm install @types/node --save` was enough for me. – Slava Fomin II Jan 23 '17 at 01:14
2

Typings should be devDependencies since they are used by TypeScript for type checking and transpiling so they should be installed using `npm install -D @types/node` since they aren't used in the transpiled code. – mtpultz Oct 10 '17 at 00:41

score 49 · Answer 2 · edited Jul 26 '17 at 19:48

49

For those looking to do this with Typescript 2.x and @types, here's what you need to do:

npm install -D @types/node
Include types: ["node"] under compilerOptions in your tsconfig.json file.

I had a tough time finding the instructions for step 2.

Reference: Typescript issue 9184

Edit:

You could also do:

Include "typeRoots": [ "node_modules/@types" ] under compilerOptions in your tsconfig.json file. This is instead of the types property and has the benefit of automatically including any @types you install with npm.

For example:

{
  "compilerOptions": {
    "typeRoots": [
      "node_modules/@types"
    ]
  }
}

[Second edit] Apparently, with the latest typescript, you only need typeRoots or types if tsconfig.json is not in the root of your project or your types are not stored in node_modules/@types.

edited Jul 26 '17 at 19:48

msanford

11,803
11
66
93

answered Sep 20 '16 at 20:50

Isaac

2,173
1
13
15

1

@msanford yes, nested within. I'll make the answer more explicit. – Isaac Oct 04 '16 at 13:56
2

Thanks so much for step 2! Was bashing my head with this for a couple of days. – tomtastico Mar 29 '17 at 10:20
1

After adding "types": ["node"] to my compiler options. all my spec.ts test files fail with cannot find name 'expect', 'it', 'describe', 'foreach' etc.... – Tyguy7 Jun 30 '17 at 21:09
Adding types: ["node"] to tsconfig.json didn't work for me. I had to add it in src/tsconfig.app.json. I was upgrading from Angular 8 to 9 and TS 3..5 to 3.8, perhaps something changed since. – Eric Soyke May 08 '20 at 21:16

score 15 · Answer 3 · answered Feb 27 '17 at 17:16

I hit this error when porting my @angular/angular2 Quickstart project into a new angular cli auto-generated project.

It seems that moduleId: module.id isn't needed anymore.

This is the latest auto-generated component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

Removing all occurances resolved my errors.

Thanks - this was the one that did it for me while upgrading from Angular 2 to Angular 5 :-) — karora, Apr 05 '18 at 11:27

score 11 · Answer 4 · answered Jun 08 '16 at 13:03

11

Instead of "ambient" try "global" by Typings 1.0

typings install dt~node --global --save

answered Jun 08 '16 at 13:03

asdf_enel_hak

7,474
5
42
84

score 6 · Answer 5 · edited Oct 01 '18 at 18:26

6

module.id

cannot find the name module.

Follow following steps to resolves this issue,

step 1: Install node module by using the below command

npm i @types/node --save

Step 2: modify the file tsconfig.app.json under src/app

"types": [
    "node"
]

edited Oct 01 '18 at 18:26

NAVIN

3,193
4
19
32

answered Oct 01 '18 at 15:28

Sathish Kumar

61
1
2

score 3 · Answer 6 · edited Sep 13 '16 at 10:00

Two key points:

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"
}
```
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.

score 1 · Answer 7 · edited Sep 23 '16 at 16:48

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

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",
...

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

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 :)

pretty sure the devDependency to `@types/node` is enough - typings is not required after that. What may happen is the IDE not finding the reference but that's a different problem. It gets resolved simply by adding `/// ` on top of the file — Sebas, Dec 13 '16 at 15:38

Kin Cheung · Answer 8 · 2017-02-08T02:12:12.920

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",
    ...
  },

score 1 · Answer 9 · answered Aug 05 '19 at 18:39

1

For me, I had a tsconfig.app.json that extended tsconfig.json. So when I added "types": ["node"] in tsconfig.json, it was being overridden by the "types" property in tsconfig.app.json. Adding "node" to the existing "types" property in tsconfig.app.config fixed it.

answered Aug 05 '19 at 18:39

adam0101

29,096
21
96
174

This was my issue kinda - the default angular `tsconfig.app.json` defines a blank `types: []` which was overwriting not just the parent `types` but also causes the `typeRoots` to be ignored – Worthy7 Oct 09 '19 at 04:21

osmarpetry · Answer 10 · 2019-06-16T00:27:10.707

0

I installed in the project, and worked well

npm install @types/node --save-dev

edited Jun 16 '19 at 00:27

answered Feb 08 '17 at 20:20

osmarpetry

73
1
5

1

Should be --save-dev – Ulrich Dohou Jun 11 '18 at 10:18

score 0 · Answer 11 · answered Dec 14 '19 at 12:50

0

It still did not work until i pasted this where i had module.id, on top of component. like this

declare var module: NodeModule;
interface NodeModule
{
id: string;
}

@Component({module.id})

answered Dec 14 '19 at 12:50

Kofi Sammie

3,237
1
17
17

TypeScript error in Angular2 code: Cannot find name 'module'

11 Answers11

Linked