Reputation: 3688

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

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

Upvotes: 164

Answers (30)

Wolf

Reputation: 6499

Sometime you need to update your angular version if current install is slower. Take care to do this

npm uninstall -g @angular/cli
npm install -g @angular/cli@latest

(or your version)

then npm install

Upvotes: 0

JED

Reputation: 1704

You can see this error if your @angular/cli version does not match the version of the @angular packages being referenced in the project. For me, @angular/core in my project was version 13.X.X but @angular/cli was version 16.X.X (because this is a new VM where I freshly installed Angular). I updated my project's packages to the latest versions, and the project successfully built. npm-check-updates is a useful tool for identifying what packages can/should be upgraded.

So my steps were:

I had a fresh install of the latest version of Angular.
Run npm install -g npm-check-updates to install the npm-check-updates tool
Run ncu --upgrade to update my packages.json file w/ the latest package versions
Run npm install (from within my project's base directory) to install the latest versions packages. Note - you can add the -- force flag if you don't care that the CLI is warning you about conflicts... this may be necessary when making big sweeping changes.

Another option would be to downgrade your version of @angular/cli to match the version of angular being referenced in your project.

Upvotes: 0

PKS

Reputation: 773

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

Upvotes: 1

Jack M

Reputation: 61

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.

Upvotes: 0

imsan

Reputation: 469

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

Upvotes: 1

S M Kamran

Reputation: 4503

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.

Upvotes: 2

sopehl

Reputation: 1139

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.

Upvotes: 5

Kavyashree B.S

Reputation: 71

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.

Upvotes: 6

Sanket Sardesai

Reputation: 439

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)

Upvotes: 12

Anand

Reputation: 19

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.

Upvotes: 0

Adamantus

Reputation: 821

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

Upvotes: 1

Sandesh Tayde

Reputation: 172

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

Upvotes: 11

Stefan Mitic

Reputation: 1671

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

npm install

inside the angular project folder.

Upvotes: 137

Paras Rawat

Reputation: 29

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

Upvotes: 0

Torsten Barthel

Reputation: 3476

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

Upvotes: 1

Amir Aghajani

Reputation: 387

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

Upvotes: 1

Sydney_dev

Reputation: 1380

This worked for me.

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

Upvotes: 0

VEEZ

Reputation: 1

Try this, it worked for me:

npm i --save @angular/platform-server

Then reopen VS code

Upvotes: 0

Yodhraj Patil

Reputation: 11

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

Upvotes: 0

Kazi

Reputation: 1553

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

Upvotes: 2

Prithi

Reputation: 71

You need to install it manually.

$ npm i @angular/core -s

Upvotes: 7

Kruti

Reputation: 159

Delete Node Modules folder from project folder.Run below command

npm cache clean --force npm install

It should work.

Upvotes: 11

Jeter Costa e Silva

Reputation: 21

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.

Upvotes: 2

AbdusSalam

Reputation: 440

Executing the following two commands solves the problem for me:

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

Upvotes: 0

Santiago Ceron

Reputation: 329

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.

Upvotes: 5

Tripp Cannella

Reputation: 1094

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.

Upvotes: 1

Master rsl

Reputation: 46

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.

Upvotes: 1

Mohamad Alhamid

Reputation: 386

I solved this problem as follow:

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

Upvotes: -2

Siundu254

Reputation: 51

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.

Upvotes: -3

VinK

Reputation: 69

Do run

npm install

it will work most of the cases

Upvotes: -1

VSCode cannot find module &#39;@angular/core&#39; or any other modules

Answers (30)

Related Questions

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