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
– Prajwal, Commented Aug 27, 2017 at 9:29
Did you open a project in vscode before you npm install? If yes have you try to restart vscode after that ? — angularconsulting.au
– angularconsulting.au, Commented Aug 27, 2017 at 11:50
LOL Thanks! Restarting VSCode sorted it for me. This was driving me mad! — Doug
– Doug, Commented Jul 5, 2021 at 15:34

tryingToLearn · Accepted Answer · 2019-01-24 03:39:38Z

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

this worked for me...but now getting another error Build: Class 'Subject<T>' incorrectly extends base class 'Observable<T>'
@sam that does not seem to be related to this issue. Maybe post it as a new question alongwith your code.
This worked for me. I added src to basUrl in the tsconfig.app.json file. "baseUrl": "src",
Adding "baseUrl":"src" in the tsconfig.json file worked for me.
Nice by Adding "baseUrl": "src" this in tsconfig and restart IDE resolve my issue.

BuZZ-dEE · Accepted Answer · 2021-01-12 16:39:02Z

137

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

npm install

inside the angular project folder.

edited Jan 12, 2021 at 16:39

BuZZ-dEE

7,15316 gold badges75 silver badges105 bronze badges

answered Jul 14, 2018 at 17:18

Stefan Mitic

1,6711 gold badge10 silver badges8 bronze badges

4 Comments

eckes Over a year ago

The directory tree in the original question contained the node_moduls/@angular/core folder, but maybe it was empty.

andreikashin Over a year ago

then restart VSCode

StackOverflowUser Over a year ago

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.

Roy.L.T Over a year ago

@andreikashin Thank you! Just solved my issue ! VSCode needs to be restarted

vbrgr · Accepted Answer · 2018-08-10 10:00:02Z

68

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

answered Aug 10, 2018 at 10:00

vbrgr

8398 silver badges10 bronze badges

1 Comment

nikoalset Over a year ago

VS Code updated without me knowing about it. Restart helped.

Judy007 · Accepted Answer · 2018-05-29 22:51:34Z

the fix for me was to run

npm install

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

Sibeesh Venu · Accepted Answer · 2018-07-07 16:27:27Z

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.

BuZZ-dEE · Accepted Answer · 2021-01-12 16:44:01Z

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)

Kruti · Accepted Answer · 2020-05-07 09:53:03Z

Delete Node Modules folder from project folder.Run below command

npm cache clean --force npm install

It should work.

BuZZ-dEE · Accepted Answer · 2021-01-12 16:41:15Z

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

Prithi · Accepted Answer · 2020-07-08 18:52:56Z

7

You need to install it manually.

$ npm i @angular/core -s

answered Jul 8, 2020 at 18:52

Prithi

711 silver badge2 bronze badges

Comments

Unheilig · Accepted Answer · 2018-09-24 07:42:27Z

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.

Kavyashree B.S · Accepted Answer · 2021-01-29 09:03:42Z

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.

scopchanov · Accepted Answer · 2018-09-06 18:03:30Z

Try using:

npm audit fix --force

and then:

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

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

Dharman · Accepted Answer · 2020-04-28 22:23:22Z

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.

sopehl · Accepted Answer · 2021-08-11 12:59:55Z

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.

Jeter Costa e Silva · Accepted Answer · 2020-05-06 23:37:42Z

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.

Kazi · Accepted Answer · 2020-08-10 09:30:11Z

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

S M Kamran · Accepted Answer · 2022-09-21 18:55:28Z

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.

Arash · Accepted Answer · 2017-08-29 04:16:14Z

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, 2017 at 4:16

Arash

3,7089 gold badges37 silver badges55 bronze badges

3 Comments

Jonathan Over a year ago

Unfortunately I'm still having this issue, even after uninstalling all extensions and restarting VS Code. :/

Jonathan Over a year ago

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.

Luis Cantero Over a year ago

Another possible solution is to click on the status bar and select "Use Workspace Version", see github.com/Microsoft/vscode/issues/34681

Mateo Rincon · Accepted Answer · 2018-10-10 23:16:35Z

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, 2018 at 23:16

Mateo Rincon

497 bronze badges

1 Comment

RajKon Over a year ago

"This extension is now unpublished from Marketplace. You can choose to uninstall it." as of 11 Nov 2019 mentioned on marketplace.visualstudio.com/…

Master rsl · Accepted Answer · 2019-07-03 11:41:08Z

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.

Tripp Cannella · Accepted Answer · 2019-10-30 20:33:31Z

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.

Abilogos · Accepted Answer · 2020-12-15 15:22:26Z

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

Torsten Barthel · Accepted Answer · 2020-12-23 13:58:19Z

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" } ] }

BuZZ-dEE · Accepted Answer · 2021-01-12 16:42:17Z

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';

imsan · Accepted Answer · 2023-03-03 15:08:53Z

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

PKS · Accepted Answer · 2023-08-30 06:27:50Z

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

AbdusSalam · Accepted Answer · 2020-04-29 17:03:33Z

0

Executing the following two commands solves the problem for me:

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

edited Apr 29, 2020 at 17:03

answered Apr 28, 2020 at 9:07

AbdusSalam

4408 silver badges13 bronze badges

2 Comments

David Buck Over a year ago

Posting multiple identical answers is, at best, "highly frowned upon" and your answers are liable to be deleted. In your case, you have also misspelled Angular in all of the answers.

Nico Haase Over a year ago

Please add some explanation to your code such that others can learn from it

Yodhraj Patil · Accepted Answer · 2020-08-21 19:14:03Z

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

SHR · Accepted Answer · 2020-10-04 15:23:24Z

0

Try this, it worked for me:

npm i --save @angular/platform-server

Then reopen VS code

edited Oct 4, 2020 at 15:23

SHR

8,3739 gold badges44 silver badges62 bronze badges

answered Oct 4, 2020 at 14:47

VEEZ

11 bronze badge

Comments

Sydney_dev · Accepted Answer · 2020-11-23 20:53:08Z

0

This worked for me.

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

answered Nov 23, 2020 at 20:53

Sydney_dev

1,4342 gold badges18 silver badges26 bronze badges

Collectives™ on Stack Overflow

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

39 Answers 39

10 Comments

4 Comments

1 Comment

Comments

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

39 Answers 39

10 Comments

4 Comments

1 Comment

Comments

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Linked

Related