VSCode cannot find module '@angular/core' or any other modules

Question

My project was generated with Angular CLI version 1.2.6.

I can compile the project and it works fine, but I always get error in VSCode telling me:

cannot  find module '@angular/core'
cannot find module '@angular/router'
cannot find module .....

I have attached content of my tsconfig.json file this has been really frustrating for me, spending 2 hours to figure out what is wrong, I have also uninstalled and reinstalled the VSCode it doesn't work.

Here is my environment specification:

@angular/cli: 1.2.6
node: 6.9.1
os: win32 x64
@angular/animations: 4.3.4
@angular/common: 4.3.4
@angular/compiler: 4.3.4
@angular/core: 4.3.4
@angular/forms: 4.3.4
@angular/http: 4.3.4
@angular/platform-browser: 4.3.4
@angular/platform-browser-dynamic: 4.3.4
@angular/router: 4.3.4
@angular/cli: 1.2.6
@angular/compiler-cli: 4.3.4
@angular/language-service: 4.3.4

OS: Microsoft vs 10 enterprise

project root folder

.angular-cli.json
.editorconfig
.gitignore
.vscode
e2e
karma.conf.js
node_modules
package.json
protractor.conf.js
README.md
src
tsconfig.json
tslint.json

node_modules folder

-@angular
--animations
--cli
--common
--compiler
--compiler-cli
--core
---@angular
---bundles
---core.d.ts
---core.metadata.json
---package.json
---public_api.d.ts
---README.md
---src
---testing
---testing.d.ts
---testing.metadata.json
--forms
--http
--language-service
--platform-browser
--platform-browser-dynamic
--router
--tsc-wrapped
@ng-bootstrap
@ngtools
-@types
--jasmine
--jasminewd2
--node
--q
--selenium-webdriver

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

It's because you've installed angular core as global. Intellisense cannot find it in node_modules. — Prajwal, Aug 27 '17 at 09:29
Did you open a project in `vscode` before you `npm install`? If `yes` have you try to restart `vscode` after that ? — angularrocks.com, Aug 27 '17 at 11:50
Can you try to generate a new project using cli, `npm install` and then see if there is the same thing with that one? — angularrocks.com, Aug 27 '17 at 12:11
LOL Thanks! Restarting VSCode sorted it for me. This was driving me mad! — Doug, Jul 05 '21 at 15:34
Restarting VSCode worked for me as well. Why doesn't Intellisense kind of _reload_ after a `npm install` ? Sounds like a basic feature to me. — ThCollignon, Nov 19 '21 at 07:17

tryingToLearn · Answer 1 · 2019-01-24T03:39:38.350

180

I was facing this issue only while importing my own created components/services For those of you like me, for whom the accepted solution did not work, can try this:

Add

"baseUrl": "src"

in your tsconfig.json. The reason is that visual code IDE is unable to resolve the base url so is unable to resolve path to imported components and gives error/warning.

Whereas angular compiler takes src as baseurl by default so it is able to compile.

NOTE:

You need to restart VS Code IDE to make this change come into effect.

EDIT:

As mentioned in one of the comments, in some cases changing workspace version might also work. More details here: https://github.com/Microsoft/vscode/issues/34681#issuecomment-331306869

edited Jan 24 '19 at 03:39

answered Feb 19 '18 at 10:03

tryingToLearn

10,691
12
80
114

2

this worked for me...but now getting another error Build: Class 'Subject' incorrectly extends base class 'Observable' – sam Mar 15 '18 at 23:17
@sam that does not seem to be related to this issue. Maybe post it as a new question alongwith your code. – tryingToLearn Mar 16 '18 at 03:28
2

This worked for me. I added src to basUrl in the tsconfig.app.json file. "baseUrl": "src", – howserss Mar 23 '18 at 01:45
1

Adding "baseUrl":"src" in the tsconfig.json file worked for me. – Chamu Oct 27 '18 at 09:13
1

Nice by Adding "baseUrl": "src" this in tsconfig and restart IDE resolve my issue. – Gauttam Jada Dec 09 '18 at 04:52
So I'm here in 2019 and I'm still getting this error. I tried adding the baseURL above but this didn't help (did restart editor). I also tried to disable workspace > enable workspace after going to a TS file > right click version number > manage extension. – Adamantus Apr 22 '19 at 19:25
So I did this and the url was already there. So instead of doing it as explained above, I just restarted vs code and it fixed the issue. – Braden Brown Dec 06 '19 at 00:58
note : to restart VScode Open the command palette ( Ctrl + Shift + P ) and execute the command: >Reload Window. – MonirRouissi Jul 04 '21 at 10:37
being a newbie looking for this answer, it may be useful to share that this needs to be added under the `"compilerOptions"` in the tsconfig.json as mentioned – mishal153 Oct 31 '21 at 05:01
I has something similar. I named my module `MyFile` and not `MyFile.ts`. – Hrvoje T Nov 12 '21 at 22:45

score 125 · Answer 2 · edited Jan 12 '21 at 16:39

125

Most likely missing node_modules package in the angular project, run:

npm install

inside the angular project folder.

edited Jan 12 '21 at 16:39

BuZZ-dEE

6,075
12
66
96

answered Jul 14 '18 at 17:18

Stefan Mitic

1,551
1
8
8

The directory tree in the original question contained the node_moduls/@angular/core folder, but maybe it was empty. – eckes Feb 08 '19 at 12:13
9

then restart VSCode – andreikashin Mar 21 '19 at 13:36
Or, in my case (Windows file manager) MOVE the blame thing (node_modules folder) BACK to ClientApp where it belongs, where you had moved it from earlier. – StackOverflowUser Dec 06 '21 at 08:21
@andreikashin Thank you! Just solved my issue ! VSCode needs to be restarted – Roy.L.T Jun 06 '23 at 11:31

score 62 · Answer 3 · answered Aug 10 '18 at 10:00

62

Visual Code restart is needed if any update or install or clear cache

answered Aug 10 '18 at 10:00

vbrgr

779
7
10

VS Code updated without me knowing about it. Restart helped. – nikoalset Mar 22 '20 at 17:01

score 28 · Answer 4 · answered May 29 '18 at 22:51

28

the fix for me was to run

npm install

and then unload,then reload the project in visual studio.

answered May 29 '18 at 22:51

Judy007

5,484
4
46
68

score 19 · Answer 5 · answered Jul 07 '18 at 16:27

I was facing this issue in my angular 5 application today. And the fix which helped me, was simple. I added "moduleResolution": "node" to the compilerOptions in the tsconfig.json file. My complete tsconfig.json file content is below.

{
  "compileOnSave": false,  
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

The moduleResolution specify module resolution strategy. The value of this settings can be node or classic. You may read more about this here.

Kruti · Answer 6 · 2020-05-07T09:53:03.517

11

Delete Node Modules folder from project folder.Run below command

npm cache clean --force npm install

It should work.

edited May 07 '20 at 09:53

answered May 07 '20 at 05:24

Kruti

159
1
4

thanks, It works :) – Domagoj Hamzic Sep 24 '21 at 21:37

score 10 · Answer 7 · edited Jan 12 '21 at 16:41

I was facing the same issue , there could be two reasons for this-

Your src base folder might not been declared, to resolve this go to tsconfig.json and add the baseUrl as "src"

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "src",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

you might have problem in npm , To resolve this , open your command window and run-npm install

score 9 · Answer 8 · edited Jan 12 '21 at 16:44

9

In the VSCode status bar, it must be showing typescript version - like this

Clicking on that version number will show you this, different versions available.

If you are using the VSCode version then switching to Workspace version solves the problem if it is VScode issue rather than your tsconfig.json (I am already using that one, so not highlighted)

edited Jan 12 '21 at 16:44

BuZZ-dEE

6,075
12
66
96

answered Sep 13 '20 at 12:12

Sanket Sardesai

399
4
6

thank you man, I was loosing living motivations ... – Shahryar Saljoughi May 08 '21 at 17:18

score 6 · Answer 9 · edited Sep 24 '18 at 07:42

6

I had the same problem. I resolved it by clearing npm cache which is at "C:\Users\Administrator\AppData\Roaming\npm-cache"

Or you can simply run:

npm cache clean --force

and then close vscode, and then open your folder again.

edited Sep 24 '18 at 07:42

Unheilig

16,196
193
68
98

answered Sep 24 '18 at 07:36

waqas.sidd

77
1
1

score 6 · Answer 10 · answered Jul 08 '20 at 18:52

6

You need to install it manually.

$ npm i @angular/core -s

answered Jul 08 '20 at 18:52

Prithi

61
1
2

score 5 · Answer 11 · edited Sep 06 '18 at 18:03

5

Try using:

npm audit fix --force

and then:

npm install --save @ng-bootstrap/ng-bootstrap

instead of saving @ng-bootstrap/ng-bootstrap globally.

edited Sep 06 '18 at 18:03

scopchanov

7,966
10
40
68

answered Sep 06 '18 at 15:32

theChosenOne.Duh

65
1
5

score 5 · Answer 12 · answered Jan 29 '21 at 09:03

I faced the same problem , As I'm trying to work on angular project in VS code.

The solution for which this issue resolved is .

Delete the node_modules folder if you have one in your project folder

2.run the following command in terminal

npm install

Then Run npm audit fix
Then Run npm audit fix --force

now the issue will be resolved.

score 5 · Answer 13 · answered Aug 11 '21 at 12:59

5

I've encountered this problem and fixed it by following commands.

npm cache clean --force
npm i @angular/core -s

And then don't forget to restart your VS code. It must be fixed.

answered Aug 11 '21 at 12:59

sopehl

1,067
1
13
18

score 2 · Answer 14 · edited Apr 28 '20 at 22:23

2

I had the same issue, was strange because project compiled and ran without errors. I updated npm and then reinstalled the packages

npm update
npm install

then vs code stop saying that.

edited Apr 28 '20 at 22:23

Dharman

30,962
25
85
135

answered Jan 08 '20 at 14:21

Santiago Ceron

139
1
5

score 2 · Answer 15 · answered May 06 '20 at 23:37

2

I tried a lot of stuff the guys informed here, without success. After, I just realized I was using the Deno Support for VSCode extension. I uninstalled it and a restart was required. After restart the problem was solved.

answered May 06 '20 at 23:37

Jeter Costa e Silva

21
1

score 2 · Answer 16 · answered Aug 10 '20 at 09:30

2

Most likely npm package is missing. And sometimes npm install does not fix the problem.

I have faced the same and I have solved this issue by deleting the node_modules folder and then npm install

answered Aug 10 '20 at 09:30

Kazi

1,461
3
19
47

score 2 · Answer 17 · answered Sep 21 '22 at 18:55

2

This also happens when you are downloading/cloning the code from a source control like GIT. The node modules are not pushed to the source control using .gitignore file and you need to run npm install the first time you get the artifacts from the repo.

answered Sep 21 '22 at 18:55

S M Kamran

4,423
7
25
35

score 1 · Accepted Answer · answered Aug 29 '17 at 04:16

1

I uninstalled all extension I had already installed, and it turns out JavaScript and TypeScript IntelliSense extension from below address caused the issue. https://marketplace.visualstudio.com/items?itemName=sourcegraph.javascript-typescript

the point here is when you visit the website you see there is a yellow label, telling you it is in preview release, but when you browse in vs extensions, you don't see that label.

answered Aug 29 '17 at 04:16

Arash

3,458
7
32
50

Unfortunately I'm still having this issue, even after uninstalling *all* extensions and restarting VS Code. :/ – Jonathan Oct 29 '17 at 19:05
1

Apologies, I should have given an update on this. Yes, it seems to have cleared up, but I'm not sure I recall exactly how. However, some things I definitely did do: A) completely deleted and re-created my solution, B) uninstalled and re-installed Angular CLI, C) rebooted my machine. Hope this might help someone. If it happens again, I'll try to be more methodical about determining how I fix it, so that I can report back a repeatable solution. – Jonathan Nov 01 '17 at 15:20
2

Another possible solution is to click on the status bar and select "Use Workspace Version", see https://github.com/Microsoft/vscode/issues/34681 – Luis Cantero Jan 31 '18 at 15:59

score 1 · Answer 19 · answered Oct 10 '18 at 23:16

1

this extension https://marketplace.visualstudio.com/items?itemName=sourcegraph.javascript-typescript was causing me the error in visual code, I uninstalled it and it works for me

answered Oct 10 '18 at 23:16

Mateo Rincon

39
6

"This extension is now unpublished from Marketplace. You can choose to uninstall it." as of 11 Nov 2019 mentioned on https://marketplace.visualstudio.com/items?itemName=sourcegraph.javascript-typescript – RajKon Nov 11 '19 at 21:21

score 1 · Answer 20 · edited Jan 12 '21 at 16:42

1

In my case it was a mispelling of the import line. Check that you have spelt the @angular/core part properly if typing it out manually.

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

edited Jan 12 '21 at 16:42

BuZZ-dEE

6,075
12
66
96

answered Apr 23 '19 at 10:49

Adamantus

813
1
12
30

score 1 · Answer 21 · answered Jul 03 '19 at 11:41

1

The fix for me was to import the entire project. For those who have this problem in 2019 please check if you have imported the entire project not a part of the project.

answered Jul 03 '19 at 11:41

Master rsl

46
3

score 1 · Answer 22 · answered Oct 30 '19 at 20:33

If you did what I (foolishly) did... Which was drag and drop a component folder into my project then you'll probably be able to solve it by doing what I did to fix it.

Explanation: Basically, by some means Angualar CLI must tell InteliJ what @angular means. If you just plop the file in your project without using the Angular CLI i.e. ng g componentName --module=app.module then Angular CLI doesn't know to update this reference so IntelliJ has no idea what it is.

Approach: Trigger the Angular CLI to update references of @angular. I currently know only one way to do this...

Implementation: Add a new component at the same level as the component your having issues with. ng g tempComponent --module=app.module This should force the Angular CLI to run and update these references in the project. Now just delete the tempComponent you just created and don't forget to remove any reference to it in app.module.

Hope this helps someone else out.

score 1 · Answer 23 · edited Dec 15 '20 at 15:22

1

In my case, when i upgrade vs project to angular 10, I had this errors.

Angular cli creates tsconfig.json, tsconfig.base.json and tsconfig.app.json when i delete tsconfig.json and rename tsconfig.base.json to tsconfig.ts all things will Ok. you must also change extends inside tsconfig.app.json to tsconfig.json

edited Dec 15 '20 at 15:22

Abilogos

4,777
2
19
39

answered Dec 15 '20 at 12:37

Amir Aghajani

367
2
5

score 1 · Answer 24 · answered Dec 23 '20 at 13:58

I had same problems with Sublime Text.

I came up with following solution: I just edited

tsconfig.json

in the root of Angular workspace to include my freshly created application.

 {
  "files": [],
  "references": [
    {
      "path": "./projects/client/tsconfig.app.json"
    },
    {
      "path": "./projects/client/tsconfig.spec.json"
    },
    {
      "path": "./projects/vehicle-market/tsconfig.app.json"
    },
    {
      "path": "./projects/vehicle-market/tsconfig.spec.json"
    },
    {
      "path": "./projects/mobile-de-lib/tsconfig.lib.json"
    },
    {
      "path": "./projects/mobile-de-lib/tsconfig.spec.json"
    }
  ]
    }

imsan · Answer 25 · 2023-03-03T15:08:53.543

For me it was that I ran 'npm install' in one of the projects and thought that was enough, but actually the solution/repo had 2 projects so I also needed to run 'npm install' in the other one too as they had separate package.json files. Reading the docs helped me to understand this;

This command installs a package and any packages that it depends on.

A package is a folder containing a program described by a package.json file.

https://docs.npmjs.com/cli/v7/commands/npm-install

score 1 · Answer 26 · answered Aug 30 '23 at 06:27

1

Make sure you are in the right directory. if you are inside any pages directory the npm i command doesn't work. Go to the base directory to run the command

answered Aug 30 '23 at 06:27

PKS

618
1
7
19

score 0 · Answer 27 · edited Jan 12 '21 at 16:42

0

All you need to do is that you have to include nodes_modules folder in your project. You might face this problem when you clone any project from github through git command line.

edited Jan 12 '21 at 16:42

BuZZ-dEE

6,075
12
66
96

answered Mar 23 '18 at 09:40

Anand

19
2

1

probably not the case since when you run npm install on the root of your site in the folder that contains your package.json file, this folder is automatically created for you with the modules needed. – Keenan Stewart Apr 03 '18 at 19:40
yah. if run nmp install then it will download necessary package by checking package.json file.. – Anand Apr 05 '18 at 06:48
1

You should mention that they should run `npm install`. Otherwise, your answer doesn't help at all. – tala9999 Jan 29 '21 at 03:16

score 0 · Answer 28 · edited Jan 12 '21 at 16:24

0

Occurs when cloning or opening existing projects in Visual Studio Code. In the integrated terminal run the command npm install

edited Jan 12 '21 at 16:24

BuZZ-dEE

6,075
12
66
96

answered Jun 25 '18 at 11:06

Paras Rawat

29
7

2

This was already given multiple times. Anything new you'd like to add? – Nico Haase Jun 25 '18 at 11:14

AbdusSalam · Answer 29 · 2020-04-29T17:03:33.197

0

Executing the following two commands solves the problem for me:

npm install -g @angular/cli
ng update --all --force

edited Apr 29 '20 at 17:03

answered Apr 28 '20 at 09:07

AbdusSalam

420
6
10

1

Posting multiple identical answers is, at best, ["highly frowned upon"](https://meta.stackexchange.com/a/211726/504460) and your answers are liable to be deleted. In your case, you have also misspelled Angular in all of the answers. – David Buck Apr 28 '20 at 10:01
Please add some explanation to your code such that others can learn from it – Nico Haase Apr 28 '20 at 11:38

score 0 · Answer 30 · answered Aug 21 '20 at 19:14

0

for Visual Studio -->

    Seems like you don't have `node_modules` directory in your project folder.
     
    Execute this command where `package.json` file is located:
    
     npm install

answered Aug 21 '20 at 19:14

Yodhraj Patil

11
2

score 0 · Answer 31 · edited Oct 04 '20 at 15:23

0

Try this, it worked for me:

npm i --save @angular/platform-server

Then reopen VS code

edited Oct 04 '20 at 15:23

SHR

7,940
9
38
57

answered Oct 04 '20 at 14:47

VEEZ

1
1

score 0 · Answer 32 · answered Nov 23 '20 at 20:53

0

This worked for me.

 npm install --save-dev @angular-devkit/build-angular

answered Nov 23 '20 at 20:53

Sydney_dev

1,448
2
17
24

score 0 · Answer 33 · answered Mar 31 '23 at 15:11

0

I had the same issue and none of these solutions worked for me.

I'm using Ubuntu in WSL2. It turns out VS Code needed to install the WSL extension to gain full access to folders in the WSL directory. After that, the errors disappeared.

answered Mar 31 '23 at 15:11

Jack M

61
1
2

score -1 · Answer 34 · answered Feb 08 '19 at 12:08

-1

Do run

npm install

it will work most of the cases

answered Feb 08 '19 at 12:08

VinK

69
7

This is incorrect. The questions states that it is compiling correctly and the the issue is with VSCode, not the compilation – ManavM Feb 08 '19 at 12:30
1

My project was compiling correctly and running, and the issue was within VSCode, not the compilation, and npm install just fixed it. – Treer May 28 '19 at 12:15

score -2 · Answer 35 · edited Apr 17 '19 at 11:30

-2

I solved this problem as follow:

Open Visual studio code with your project.
Terminal -> New Terminal.
Write npm install.

edited Apr 17 '19 at 11:30

barbsan

3,418
11
21
28

answered Apr 17 '19 at 11:01

Mohamad Alhamid

346
4
15

3

There are already at least 2 different answers saying "run `npm install`" – barbsan Apr 17 '19 at 11:32

Siundu254 · Answer 36 · 2019-02-21T05:52:04.713

From my point of view the CLI you are using and the libraries are mismatched. The ionic CLI version 1 cannot build libraries for ionic CLI version 4. The best solution is to try upgrade your CLI version. You can otherwise use nvm which allows you to run multiple node versions on the same O.S. This can help you use different ionic CLI versions across different projects depending on the requirements.

Check out nvm @: Their official windows repo. There is also a MAC and Linux version.

score -6 · Answer 37 · edited Jun 21 '18 at 12:04

-6

If we get this type of error just use the command:

 npm i @anglar/core,
 npm i @angular/common,
 npm i @angular/http,
 npm i @angular/router

After installing this also showing error just remove few words then again add that word its working.

edited Jun 21 '18 at 12:04

taras

6,566
10
39
50

answered Jun 21 '18 at 11:17

prashanth

1

1

The original package.json had them already installed. What does “remove a few words” mean? – eckes Feb 08 '19 at 12:17

VSCode cannot find module '@angular/core' or any other modules

37 Answers37

Linked