angular2: Cannot find module '@angular/core'

Question

I followed the angular2 quick start to create my project and everything works fine but my "tsc -w" command line keeps on telling me:

app/components/company/company.ts(1,36): error TS2307: Cannot find module '@angular/core'.
app/components/company/company.ts(5,22): error TS2307: Cannot find module '@angular/router'.
app/components/mission/mission.ts(1,36): error TS2307: Cannot find module '@angular/core'.
app/components/mission/mission.ts(3,22): error TS2307: Cannot find module '@angular/router'.

And there is plenty of other line like this. However, everything is compiled successfully and my application works fine, but it's quite annoying to have all these warnings/errors as real errors something get lost in the middle of them.

I'm using Angular2 rc1, TypeScript 1.8.10, WebStorm EAP (altough I'm not using the WebStorm TypeScript compilation system, I'm relying on an open terminal with "tsc -w" command line).

I checked other question related to that on SO, but I didn't find anything that really helped me.

Update

Here is my tsconfig.json file:

{
  "compilerOptions": {
    "target": "es5",
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "module": "system",
    "noImplicitAny": false,
    "outDir": "js",
    "rootDir": "app"
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

Well... Apparently, this file already changed in the quick start since I created my project. In my typings, I just have "es6-shim", "jasmine" and "node". However, I see that now, in the quick start, "es6-shim" is replaced by "core-js", but I have the feeling that it won't solve my issue (am I wrong ?). Moreover, the solution proposed by "Thierry Templier" works. Thanks — ssougnez, May 27 '16 at 13:23

score 17 · Accepted Answer · answered May 27 '16 at 13:17

17

You should use the moduleResolution attribute to node:

{
  "compilerOptions": {
    "target": "es5",
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "module": "system",
    "moduleResolution": "node", // <-----
    "noImplicitAny": false,
    "outDir": "js",
    "rootDir": "app"
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

answered May 27 '16 at 13:17

Thierry Templier

198,364
44
396
360

It seems way better indeed. Could you just explain me in two words what it changes ? – ssougnez May 27 '16 at 13:19
1

It's the way the compiler will find out the `d.ts` files for contracts of libraries. See this question: http://stackoverflow.com/questions/37413533/what-is-the-purpose-of-tsconfig-json/37413595#37413595. – Thierry Templier May 27 '16 at 13:24
9

Somehow my editor still has `Cannot find module '@angular/core'`, even though this is in the `src/` tsconfig? – PascalVKooten Jun 15 '16 at 14:46

score 5 · Answer 2 · answered Oct 20 '16 at 08:31

You first need to add typings at global level as below.

npm install -g typings

Then create typings.json using below command.

typings init

Paste below code in typings.json

{
  "name": "ng2-application",
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160725163759",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160909174046"
  }
}

Now you need to add below code in tsconfig.json

 "compilerOptions": {
        "moduleResolution": "node"
       }

After doing above steps you will able to get definitions on F12.

angular2: Cannot find module '@angular/core'

2 Answers2

Linked