[英]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.