148

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

screenshot screenshot

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"
    ]
  }
}
8
  • 3
    It's because you've installed angular core as global. Intellisense cannot find it in node_modules.
    – Prajwal
    Aug 27, 2017 at 9:29
  • angular core is in my node_module
    – Arash
    Aug 27, 2017 at 9:31
  • 69
    Did you open a project in vscode before you npm install? If yes have you try to restart vscode after that ? Aug 27, 2017 at 11:50
  • 9
    i have restarted 100 times
    – Arash
    Aug 27, 2017 at 11:55
  • 1
    LOL Thanks! Restarting VSCode sorted it for me. This was driving me mad!
    – Doug
    Jul 5, 2021 at 15:34

38 Answers 38

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

10
  • 2
    this worked for me...but now getting another error Build: Class 'Subject<T>' incorrectly extends base class 'Observable<T>'
    – sam
    Mar 15, 2018 at 23:17
  • @sam that does not seem to be related to this issue. Maybe post it as a new question alongwith your code. Mar 16, 2018 at 3:28
  • 2
    This worked for me. I added src to basUrl in the tsconfig.app.json file. "baseUrl": "src",
    – howserss
    Mar 23, 2018 at 1:45
  • 1
    Adding "baseUrl":"src" in the tsconfig.json file worked for me.
    – Chamu
    Oct 27, 2018 at 9:13
  • 1
    Nice by Adding "baseUrl": "src" this in tsconfig and restart IDE resolve my issue. Dec 9, 2018 at 4:52
125

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

npm install

inside the angular project folder.

4
  • The directory tree in the original question contained the node_moduls/@angular/core folder, but maybe it was empty.
    – eckes
    Feb 8, 2019 at 12:13
  • 9
    then restart VSCode Mar 21, 2019 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. Dec 6, 2021 at 8:21
  • @andreikashin Thank you! Just solved my issue ! VSCode needs to be restarted
    – Roy.L.T
    Jun 6 at 11:31
62

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

1
  • VS Code updated without me knowing about it. Restart helped.
    – nikoalset
    Mar 22, 2020 at 17:01
28

the fix for me was to run

npm install

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

19

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.

3
  • saved my career!
    – null
    Jan 30, 2020 at 22:00
  • Best answer ever!
    – José Neto
    Sep 3, 2020 at 9:28
  • To the top with you! Dec 11, 2020 at 3:54
11

Delete Node Modules folder from project folder.Run below command

npm cache clean --force npm install

It should work.

1
11

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

  1. 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
  }
}
  1. you might have problem in npm , To resolve this , open your command window and run-npm install
9

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

enter image description here

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

enter image description here

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)

enter image description here

1
  • thank you man, I was loosing living motivations ... May 8, 2021 at 17:18
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.

0
6

You need to install it manually.

$ npm i @angular/core -s
5

Try using:

npm audit fix --force

and then:

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

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

5

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 .

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

2.run the following command in terminal

npm install

  1. Then Run npm audit fix

  2. Then Run npm audit fix --force

now the issue will be resolved.

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.

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.

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.

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

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.

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.

3
  • Unfortunately I'm still having this issue, even after uninstalling all extensions and restarting VS Code. :/
    – Jonathan
    Oct 29, 2017 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 1, 2017 at 15:20
  • 2
    Another possible solution is to click on the status bar and select "Use Workspace Version", see github.com/Microsoft/vscode/issues/34681 Jan 31, 2018 at 15:59
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

1
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.

1

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.

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

1

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

1

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

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

0

Executing the following two commands solves the problem for me:

npm install -g @angular/cli
ng update --all --force
2
  • 1
    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.
    – David Buck
    Apr 28, 2020 at 10:01
  • Please add some explanation to your code such that others can learn from it
    – Nico Haase
    Apr 28, 2020 at 11:38
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 
0

Try this, it worked for me:

npm i --save @angular/platform-server  

Then reopen VS code

0

This worked for me.

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.