[英]Angular 8+ tsconfig Path Aliases not Recognized in .spec files
[英]Angular 11 tsconfig Path Aliases not Recognized
我正在使用 Angular 11 並嘗試使用像import {smthg} from '@common'
而不是import {smthg} from '../../../common'
但我總是在 IDEA 中遇到錯誤: TS2307: Cannot find module '@common' or its corresponding type declarations.
嘗試編譯 .ts 文件時,控制台出現同樣的錯誤( ng serve
)
有趣的是,當我將/index
添加到導入時,IDEA 停止了詛咒,但錯誤並沒有在控制台中消失
myAngularProject
│ package.json
│ tsconfig.json
│ tsconfig.app.json
│ angular.json
│
└───src
│ main.ts
│ index.html
│
└───app
│
└───common
│
└───features
tsconfig.json:
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@common/*": ["app/common/*"],
"@features/*": ["app/features/*"],
"@platform/*": ["app/platform/*"],
"@env": ["environments/environment"]
},
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"module": "es2020",
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}
tsconfig.app.json:
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": ["node"]
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
版本:
Angular CLI: 11.0.7
Node: 14.2.0
OS: darwin x64
Angular: 11.0.9
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1100.7
@angular-devkit/build-angular 0.1100.7
@angular-devkit/core 11.0.7
@angular-devkit/schematics 11.0.7
@angular/cli 11.0.7
@schematics/angular 11.0.7
@schematics/update 0.1100.7
rxjs 6.6.3
typescript 4.0.5
所以事實證明,angular 引擎允許根據 tsconfig 中“路徑”中指定的內容為路徑創建別名。
但是為了能夠訪問模塊的子文件夾以及從模塊頂層的 index.ts 導出的內容,您需要像這樣指定“路徑”:
{
...
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@common/*": ["app/common/*"],
"@common": ["app/common/index.ts"]
}
...
}
}
我遇到過同樣的問題。 我試圖將使用 Angular 10 制作的項目遷移到 Angular 11,處理./src/app
文件夾,但這不起作用...
但是在一個新項目中,我得到了路徑別名以這種方式工作:
PS C:\Projects> npm uninstall --g @angular/cli
PS C:\Projects> npm i --g @angular/cli
true
:PS C:\Projects> ng new <<name-project>>
PS C:\Projects> cd <<name-project>>
tsconfig.app.json
,如下所示:/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": [],
// ADD THIS ↓↓↓
"baseUrl": "./",
"paths": {
"@tool/*": [ "src/app/tool/*" ],
"@models/*": [ "src/app/models/*" ],
"@services/*": [ "src/app/services/*" ],
"@components/*": [ "src/app/components/*" ],
"@interfaces/*": [ "src/app/interfaces/*" ]
}
// ADD THIS ↑↑↑
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
tsconfig.json
如下:/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"module": "es2020",
"lib": [
"es2018",
"dom"
],
// ADD THIS ↓↓↓
"baseUrl": "./",
"paths": {
"@tool/*": [ "src/app/tool/*" ],
"@models/*": [ "src/app/models/*" ],
"@services/*": [ "src/app/services/*" ],
"@components/*": [ "src/app/components/*" ],
"@interfaces/*": [ "src/app/interfaces/*" ]
}
// ADD THIS ↑↑↑
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}
tsconfig.spec.json
如下:/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
"jasmine"
],
"baseUrl": "./",
"paths": {
"@tool/*": [ "src/app/tool/*" ],
"@models/*": [ "src/app/models/*" ],
"@services/*": [ "src/app/services/*" ],
"@components/*": [ "src/app/components/*" ],
"@interfaces/*": [ "src/app/interfaces/*" ]
}
},
"files": [
"src/test.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}
首先,您需要重新啟動代碼編輯器以確保您的 linter 沒有問題。
我有類似的問題,在我的情況下配置是正確的,雖然我當時不知道由於缺乏經驗,所以我繼續嘗試我能找到的不同解決方案。 事實證明,問題在於 linter 在 IDE 重新啟動之前無法看到配置更改(添加的路徑定義)。
較新版本不再支持路徑別名
但是您現在可以這樣做以直接導入相對於src
目錄的文件
go 到您的tsconfig.json
文件添加baseUrl
為"."
"compilerOptions": {
"baseUrl":".",
...
現在你可以直接導入相對於src
目錄的東西
import Myfile from "src/myfile.js"
這對我有用!
這個在 Angular 13 中為我工作,不要錯過每個路徑值中的點(.) 。
"baseUrl": "./",
"paths": {
"@app/*": [
"./src/app/*"
],
"@env/*": [
"./src/environments/*"
]
}
在我的情況下,路徑別名實際上是有效的,但我在文件夾中缺少 a.ts 文件,因此無法識別類型。 但同樣的錯誤:“找不到模塊 @app 或其相應的類型聲明”
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.