我该如何在Angular CLI生成的项目中使用绝对路径?
假设我有这个路径:src -> app -> shared
,我想要写成import {} from 'shared/ffdsdf/my.module.ts'
而不是'../shared/ffdsdf/my.module.ts'
我该如何在Angular CLI生成的项目中使用绝对路径?
假设我有这个路径:src -> app -> shared
,我想要写成import {} from 'shared/ffdsdf/my.module.ts'
而不是'../shared/ffdsdf/my.module.ts'
更好的示例:
tsconfig.json
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@app/*": [
"app/*"
],
"@app/core/*": [
"app/core/*"
],
"@app/shared/*": [
"app/shared/*"
],
"@env/*": [
"environments/*"
]
}
}
}
使用:
import { someService } from "@app/core/some.service";
改为:
import { someService } from "./../../core/some.service";
有一种 TypeScript 功能可以实现这个功能。
您可以修改 src/tsconfig.json
文件,以启用此功能,在 compilerOptions
下添加以下内容:
{ "compilerOptions": { // ... "paths": { "*": [ "./*", "app/*", "../node_modules/*" ] } }
您可以根据需要更改模式键和值。您可以添加或删除文件夹,更改顺序等。
您还可以选择前缀而不仅是使用 *
(特别是如果它会导致问题),您可以使用类似于 ~/*
的东西,然后您的导入将全部为 from '~/shared/sample'
等。
"compilerOptions": {
"rootDir": "src",
"baseUrl": "src"
}
组件将会长这样:
import { Thing } from 'app/Thing';
对我来说,添加@并列出每个路径似乎是浪费时间。这样每个项目都将以相同的方式工作。
提示:如果出现模块未找到错误,请重新启动IDE,以便tsc重新启动。
tsconfig.json
中创建baseUrl
和路径。 {
"baseUrl": "./src",
"paths": {
"@angular/*": [
"../node_modules/@angular/*"
],
"@app/*": ["app/*"],
"@views/*": ["app/views/*"],
"@containers/*": ["app/containers/*"]
}
}
注意:在这里你可以看到我还添加了@angular路径解析到tsconfig.json。这一步将确保VSCode显示正确的语法高亮。
注意:如果不执行此步骤,在编译Angular项目时会出现模块找不到的错误。(即使没有这个步骤,语法高亮也是正常的)。
"C:/xxx/app/*"
而不是"app/*"
? - ps0604