Reputation: 3688
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
Views: 469726
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
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:
npm install -g npm-check-updates
to install the npm-check-updates toolncu --upgrade
to update my packages.json file w/ the latest package versionsnpm 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
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
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
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
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
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
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 .
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
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
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
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
Reputation: 172
I was facing the same issue , there could be two reasons for this-
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
}
}
npm install
Upvotes: 11
Reputation: 1671
Most likely missing node_modules
package in the angular project, run:
npm install
inside the angular project folder.
Upvotes: 137
Reputation: 29
Occurs when cloning or opening existing projects in Visual Studio Code.
In the integrated terminal run the command npm install
Upvotes: 0
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
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
Reputation: 1380
This worked for me.
npm install --save-dev @angular-devkit/build-angular
Upvotes: 0
Reputation: 1
Try this, it worked for me:
npm i --save @angular/platform-server
Then reopen VS code
Upvotes: 0
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
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
Reputation: 159
Delete Node Modules folder from project folder.Run below command
npm cache clean --force
npm install
It should work.
Upvotes: 11
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
Reputation: 440
Executing the following two commands solves the problem for me:
npm install -g @angular/cli
ng update --all --force
Upvotes: 0
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
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
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
Reputation: 386
I solved this problem as follow:
npm install
.Upvotes: -2
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