Typescript: Angular 10: Path Mapping shows error in VSCode(Normal/Insiders) when import
So I updated a project that was in Angular 8.2 (a project template) to version 10 and followed the instructions from https://update.angular.io/ and everything was ok, but when implemented Path Mapping the pain started, I'm getting this error everywhere:
Cannot find module '@environments/environment' or its corresponding type declarations.ts(2307)
And this error applies to @environments and @modules, which are declared in paths, the others does not show any error cause they are not in use.
Right now the project is building correctly when use ng build, haven't tried ng build --prod, no errors appear but Visual Studio Code (v1.46.1) is showing me the imports with errors, this is that I have:
src/tsconfig.json
{
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./e2e/tsconfig.json"
}
]
}
src/tsconfig.app.json
{
"extends": "./tsconfig.base.json",
"compilerOptions": {
"outDir": "./lw/app",
"types": []
},
"files": ["src/main.ts", "src/polyfills.ts"],
"include": ["src/**/*.d.ts"],
"exclude": ["src/test.ts", "src/**/*.spec.ts"]
}
src/tsconfig.base.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "src",
"outDir": "./dist/lw",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "es2020",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"emitDecoratorMetadata": true,
"noImplicitAny": false,
"typeRoots": ["node_modules/@types"],
"lib": ["es2018", "dom"],
"paths": {
"@angular/*": ["./node_modules/@angular/*"],
"@assets/*": ["assets/*"],
"@environments/*": ["environments/*"],
"@api/*": ["app/api/*"],
"@components/*": ["app/components/*"],
"@login/*": ["app/login/*"],
"@models/*": ["app/models/*"],
"@pages/*": ["app/pages/*"],
"@services/*": ["app/services/*"],
"@shared/*": ["app/shared/*"]
}
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictTemplates": true,
"strictInjectionParameters": true
}
}
NOTE: Have tried with "baseUrl": "src" - "baseUrl": "./src" - "baseUrl": "./" and nothing change.
VSCode info
Version: 1.46.1 (user setup)
Commit: cd9ea6488829f560dc949a8b2fb789f3cdc05f5d
Date: 2020-06-17T21:13:20.174Z
Electron: 7.3.1
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Windows_NT x64 10.0.18363
VSCode Insiders info
Version: 1.47.0-insider (user setup)
Commit: 376d9d9d785ccca128fdbb16f001446d0ad64d32
Date: 2020-07-03T10:27:06.804Z
Electron: 7.3.2
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Windows_NT x64 10.0.18363
Angular CLI
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ â–³ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 10.0.1
Node: 12.18.1
OS: win32 x64
Angular: 10.0.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.1000.1
@angular-devkit/build-angular 0.1000.1
@angular-devkit/build-optimizer 0.1000.1
@angular-devkit/build-webpack 0.1000.1
@angular-devkit/core 10.0.1
@angular-devkit/schematics 10.0.1
@angular/cli 10.0.1
@ngtools/webpack 10.0.1
@schematics/angular 10.0.1
@schematics/update 0.1000.1
rxjs 6.5.5
typescript 3.9.6
webpack 4.43.0
Also one really weird thing that happens is for example I have 2 Services (I'm having the problems in every Service) one CityService (which is in use) and ColorService (which is not in use), CityService is not showing any error and I can access the module definition (F12), but in ColorService with the same structure the problems appear and are in red.
Xiurik
All 20 comments
An extra reference with some Images:
Xiurik
on 3 Jul 2020
After uninstalling and installing many times, is working now.
Xiurik
on 4 Jul 2020
Yeah, is now back the error, haven't been fixed yet.
Xiurik
on 5 Jul 2020
I have the same issue, but only in new files (component).
benjamimbessa
on 8 Jul 2020
After trying everything, I put my previous configuration in tsconfig.json and it finally worked.
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
I know that's not a solution, but I need to work!
benjamimbessa
on 8 Jul 2020
any solution for this?
personaaleatoria
on 12 Jul 2020
Having the same problem here with angular 10.
I did benjamimbessa suggestion and it works for now. Thank u!
telmaco
on 13 Jul 2020
This doesn't look like a TypeScript bug. If someone can demonstrate this in a small repro without Angular CLI involved, please open a new issue with a minimal demonstration of the problem.
RyanCavanaugh
on 14 Jul 2020
This issue has been marked as 'External' and has seen no recent activity. It has been automatically closed for house-keeping purposes.
typescript-bot
on 17 Jul 2020
Something has been obviously changed between Angular 9 to 10 in code related to imports, and baseUrl.
The fix is to change baseUrl in tsconfig.json as follows (note trailing slash character):
"baseUrl": "src/",
HEBOS
on 17 Aug 2020
so, what is the fix? changing baseUrl does not help.
dimitriy-k
on 25 Aug 2020
After trying everything, I put my previous configuration in tsconfig.json and it finally worked.
{ "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "module": "esnext", "moduleResolution": "node", "importHelpers": true, "target": "es2015", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2018", "dom" ] }, "angularCompilerOptions": { "fullTemplateTypeCheck": true, "strictInjectionParameters": true } }I know that's not a solution, but I need to work!
First of all THANK YOU!!!!
This actually fixed my problem.
It all started when I merged a branch into my master.
After investigating my issue I have to say it was
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"downlevelIteration": true,
"importHelpers": true,
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "esnext",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"types": [
"cypress",
"jquery",
"node"
],
"lib": [
"es2018",
"dom"
]
},
"include": [
"./ssw-electron/main.ts" // <-------- Here is the problem!
]
}
removing the include did the trick.
can anyone try explain it please for me and for others who might encounter this ? THANKS!
noririco
on 28 Aug 2020
After trying everything, I put my previous configuration in tsconfig.json and it finally worked.
{ "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "module": "esnext", "moduleResolution": "node", "importHelpers": true, "target": "es2015", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2018", "dom" ] }, "angularCompilerOptions": { "fullTemplateTypeCheck": true, "strictInjectionParameters": true } }
I know that's not a solution, but I need to work!First of all THANK YOU!!!!
This actually fixed my problem.It all started when I merged a branch into my master.
After investigating my issue I have to say it was
{ "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "downlevelIteration": true, "importHelpers": true, "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "module": "esnext", "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es2015", "typeRoots": [ "node_modules/@types" ], "types": [ "cypress", "jquery", "node" ], "lib": [ "es2018", "dom" ] }, "include": [ "./ssw-electron/main.ts" // <-------- Here is the problem! ] }removing the include did the trick.
can anyone try explain it please for me and for others who might encounter this ? THANKS!
I have same issue,
ctrl-d
on 3 Sep 2020
Any solution on this issue? Still having a problem in VSCode.
21-razz
on 4 Sep 2020
Yes i fixed the issue
the issue was that since i used "include" it ignored all the other files
i added also my src folder & its all good now "include" ["src", "../pathtoextras/myextracode.ts" ]
ctrl-d
on 4 Sep 2020
Something has been obviously changed between Angular 9 to 10 in code related to imports, and baseUrl.
The fix is to change baseUrl in tsconfig.json as follows (note trailing slash character):
"baseUrl": "src/",
This didnt work for me, any other solution for this?
shubhisood
on 11 Sep 2020
After uninstalling and installing many times, is working now.
What have to reinstalled many times?
shubhisood
on 11 Sep 2020
Update in 'tsconfig.app.json'
"include":["src/*/.ts"]
look this: "include": ["src/ */.d.ts", "src/ */.ts"]
this resolve the problem
nixerlog
on 20 Sep 2020
Tried everything and its still not working...
lenichols
on 28 Sep 2020
Update in 'tsconfig.app.json'
"include":["src/*/_.ts"] look this: "include": ["src/ */_.d.ts", "src/ */.ts"]
this resolve the problem
This solved the problem for me! Thanks
hobojoe
on 29 Sep 2020
Related issues
MartynasZilinskas
·
3Comments
wmaurer
·
3Comments
zhuravlikjb
·
3Comments
Antony-Jones
·
3Comments
Zlatkovsky
·
3Comments
Most helpful comment
After trying everything, I put my previous configuration in tsconfig.json and it finally worked.
{ "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "module": "esnext", "moduleResolution": "node", "importHelpers": true, "target": "es2015", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2018", "dom" ] }, "angularCompilerOptions": { "fullTemplateTypeCheck": true, "strictInjectionParameters": true } }I know that's not a solution, but I need to work!