Angular 11 tsconfig 路径别名无法识别
Posted
技术标签:
【中文标题】Angular 11 tsconfig 路径别名无法识别【英文标题】：Angular 11 tsconfig Path Aliases not Recognized 【发布时间】：2021-04-27 00:10:21 【问题描述】：我正在使用 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"
]
IDEA 错误：
控制台 tsc 错误：
版本：
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 编译器不支持paths。绝对烦人...
感谢这个可怕的消息（看起来是真的。好吧，看来唯一的方法是放弃 angular CLI 并使用 webpack。
我会在一年前推荐这种方法，但是有太多的文档假定 CLI 以及在它之上构建的工具，例如 Ionic CLI，它是您应该谨慎做出的决定。我并不是说这是错误的，因为我特别讨厌这么多分层的工具抽象，它们不允许您在需要时了解内部结构，但请仔细考虑。祝你好运。
【参考方案1】：
事实证明，角度引擎允许根据 tsconfig 中“路径”中指定的内容为路径创建别名。
但为了能够访问模块的子文件夹以及从模块顶层的 index.ts 导出的内容，您需要像这样指定“路径”：
...
"compilerOptions":
"baseUrl": "src",
"paths":
"@common/*": ["app/common/*"],
"@common": ["app/common/index.ts"]
...
【讨论】：
如果您使用的是 VS Code 并且在应用此修复之前有无法识别的路径，您可能还需要重新启动 VS Code 以清除 Linting 错误。 谢谢，但它在 Angular 12 中不起作用：/【参考方案2】：我有同样的问题。我试图将使用 Angular 10 制作的项目迁移到 Angular 11，处理 ./src/app 文件夹，但这没有用...
但在一个新项目中，我得到了路径别名以这种方式工作：
更新您的 Angular cli：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"
]
【讨论】：
它不适用于 Angular 12.1.4【参考方案3】：首先，您需要重新启动代码编辑器以确保您的 linter 没有问题。
我遇到了类似的问题，在我的情况下配置是正确的，但由于缺乏经验，我当时不知道，所以我继续尝试我能找到的不同解决方案。事实证明，问题在于 linter 在 IDE 重新启动之前无法看到配置更改（添加的路径定义）。
【讨论】：
If nothing helps 你的意思是在尝试了这些解决方案之后？因为如果您确实尝试过它们，那么很可能这就是解决问题的原因 - 在重新启动编辑器之后 - 而不仅仅是神奇地重新启动它的事实。请在您的答案中添加详细信息。谢谢。【参考方案4】：
新版本不再支持路径别名
但您现在可以这样做，直接导入相对于src 目录的文件
转到您的tsconfig.json 文件添加baseUrl 为"."
"compilerOptions":
"baseUrl":".",
...
现在你可以直接导入相对于src目录的东西
import Myfile from "src/myfile.js"
这对我有用！
【讨论】：
以上是关于Angular 11 tsconfig 路径别名无法识别的主要内容，如果未能解决你的问题，请参考以下文章
未找到 tsconfig.json 中的 TypeScript 路径别名
在 tsconfig.app.json 中为 Angular 项目定义路径
如何配置 Angular 项目 tsconfig 路径 [] 而不会出现 linting 错误？
使用 ng-packagr 它无法识别我的 tsconfig 路径