要解决Angular 11中的tsconfig路径别名无法识别的问题,可以按照以下步骤进行操作:
在项目根目录中找到tsconfig.json
文件并打开。
在compilerOptions
下添加paths
属性,并为路径别名设置映射关系。例如:
"compilerOptions": {
"paths": {
"@app/*": ["src/app/*"],
"@shared/*": ["src/app/shared/*"]
}
}
这里我们为@app
和@shared
两个路径别名设置了对应的映射关系。
tsconfig.paths.json
文件,并添加以下内容:{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@app/*": ["src/app/*"],
"@shared/*": ["src/app/shared/*"]
}
}
}
这个文件用于在开发环境中使用路径别名。
angular.json
文件中找到architect > build > options
节点下的tsConfig
属性,并将其值设置为tsconfig.paths.json
。例如:"architect": {
"build": {
"options": {
"tsConfig": "tsconfig.paths.json"
}
}
}
这样在构建项目时,将使用tsconfig.paths.json
文件中的路径别名配置。
src
目录下的typings.d.ts
文件中添加以下内容:declare module '@app/*' {
const value: any;
export default value;
}
declare module '@shared/*' {
const value: any;
export default value;
}
这个文件用于在编辑器中进行路径别名的类型检查。
完成上述步骤后,重新启动项目,Angular 11应该能够正确识别并使用路径别名了。