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"
]
}
}
This question is related to
angular
visual-studio-code
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.
Visual Code restart is needed if any update or install or clear cache
Do run
npm install
it will work most of the cases
the fix for me was to run
npm install
and then unload,then reload the project in visual studio.
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
You need to install it manually.
$ npm i @angular/core -s
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
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.
Delete Node Modules folder from project folder.Run below command
npm cache clean --force
npm install
It should work.
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
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.
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
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
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.
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.
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.
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.
Most likely missing node_modules
package in the angular project, run:
npm install
inside the angular project folder.
Executing the following two commands solves the problem for me:
npm install -g @angular/cli
ng update --all --force
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.
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';
_x000D_
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.
Try using:
npm audit fix --force
and then:
npm install --save @ng-bootstrap/ng-bootstrap
instead of saving @ng-bootstrap/ng-bootstrap
globally.
I solved this problem as follow:
npm install
.This worked for me.
npm install --save-dev @angular-devkit/build-angular
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
Occurs when cloning or opening existing projects in Visual Studio Code.
In the integrated terminal run the command npm install
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)
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.
Try this, it worked for me:
npm i --save @angular/platform-server
Then reopen VS code
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"
}
]
}
Source: Stackoverflow.com