vs code cannot find module '@angular/core'

问题:

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 vs code 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 vs code it doesn't work.

here is my enviroment 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_module 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"
    ]
  }
}

回答1:

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

回答2:

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

npm install

inside the angular project folder.

回答3:

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

回答4:

the fix for me was to run

npm install

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

回答5:

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.

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

回答7:

Try using:

npm audit fix --force

and then:

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

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

回答8:

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.

回答9:

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

回答10:

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

回答11:

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.

回答12:

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.

回答13:

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 throu git command line.

回答14:

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

回答15:

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. Hope it works!

回答16:

Faced the same issue. I restarted the Visual Code Editor and it resolved my problem.

回答17:

I solved this problem as follow:

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

回答18:

I got stuck with this issue for couple of hours, all i did was to restart VS Code and the issue is gone.

回答19:

Do run

npm install 

it will work most of the cases

回答20:

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.

回答21:

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.