[英]Angular 10: Path Mapping shows error in VSCode when import
因此,我將 Angular 8.2(項目模板)中的項目更新到版本 10,並按照https://update.angular的說明進行了操作,但一切都開始了 IFC562DDZ 的映射。到處都出現這個錯誤:
Cannot find module '@environments/environment' or its corresponding type declarations.ts(2307)
此錯誤適用於在路徑中聲明的@environments和@modules ,其他沒有顯示任何錯誤,因為它們未在使用中。
現在,使用ng build時項目正在正確構建,沒有嘗試ng build --prod ,沒有出現錯誤,但Visual Studio Code (v1.46.1)向我顯示導入錯誤,這就是我有:
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
}
}
注意:已嘗試使用 "baseUrl": "src" 和 "baseUrl": "./src" 和 "baseUrl": "./" 並且沒有任何變化。
構建結果
$ ng build Generating ES5 bundles for differential loading... ES5 bundle generation complete. chunk {polyfills} polyfills-es2015.js, polyfills-es2015.js.map (polyfills) 141 kB [initial] [rendered] chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 656 kB [initial] [rendered] chunk {main} main-es2015.js, main-es2015.js.map (main) 12.2 kB [initial] [rendered] chunk {main} main-es5.js, main-es5.js.map (main) 14.8 kB [initial] [rendered] chunk {main} main-es2015.js, main-es2015.js.map (main) 12.2 kB [initial] [rendered] chunk {main} main-es5.js, main-es5.js.map (main) 14.8 kB [initial] [rendered] chunk {styles} styles-es2015.js, styles-es2015.js.map (styles) 928 kB [initial] [rendered] chunk {styles} styles-es5.js, styles-es5.js.map (styles) 930 kB [initial] [rendered] chunk {runtime} runtime-es2015.js, runtime-es2015.js.map (runtime) 6.16 kB [entry] [rendered] chunk {runtime} runtime-es5.js, runtime-es5.js.map (runtime) 6.16 kB [entry] [rendered] chunk {vendor} vendor-es2015.js, vendor-es2015.js.map (vendor) 2.16 MB [initial] [rendered] chunk {vendor} vendor-es5.js, vendor-es5.js.map (vendor) 2.51 MB [initial] [rendered] chunk {scripts} scripts.js, scripts.js.map (scripts) 167 kB [entry] [rendered] Date: 2020-07-03T02:50:44.017Z - Hash: aa2180f982b4b754ebb6 - Time: 8621ms
VSCode 信息
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
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
這里還有一張我的項目是如何組織的圖片
另外發生的一件非常奇怪的事情是,例如我有 2 個服務(我在每個服務中都有問題)一個CityService (正在使用)和ColorService (未使用), CityService沒有顯示任何錯誤和我可以訪問模塊定義(F12),但在具有相同結構的ColorService中,問題出現並顯示為紅色。
我已經通過以下更改解決了這個問題。
1. just change the path of extends("extends": "../tsconfig.json",) in tsconfig.app.json and tsconfi.app.json
2. Copy all code the from tsconfig.base.json to tsconfig.json file.
Below is the code of tsconfig.json file.
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"downlevelIteration": true,
"module": "es2020",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es2015",
"strict": false,
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
],
"paths": {
"@app-models": [
"src/app/model/index"
],
"@app-core": [
"src/app/core/index"
],
"@app-shared": [
"src/app/shared/index"
]
}
}
}
3.
A) If you have an active ng serve, restart the ng serve
CTRL + C
ng serve
B) If you don't have an active ng serve, do this:
Command + Shift + P
Search for "TypeScript: Restart TS Server"
Hit enter
請嘗試改變
“環境/環境”
至
'src/環境/環境'
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.