存在的问题以及解决方式
在项目中会遇到目录结构嵌套比较深的情况,这样会导致最深处的文件想引用根目录或者外层的资源会有这样的情况:
import { SomeInfo, SomeTypeInfo } from '../../../../../entities';
上层路径过多,导致使用了好几处 ../
。造成的问题一个是难以一下子看出引用资源 SomeInfo
的目录地址,二是不美观。
我们可以通过配置 tsconfig.json
的 paths
属性来解决这个问题:
比如:
// tsconfig.json
{
"compilerOptions": {
"baseUrl": "./",
// ...
"paths": {
"@shared/*": ["src/app/shared/*"],
"@app/*": ["src/app/*"]
}
},
"angularCompilerOptions": {}
}
这样,如果我们需要引用 src/app/entities
下的资源,只需要:
import { SomeInfo, SomeTypeInfo } from '@app/entities';
一定程度上更加清晰。也更加美观。
注意事项
需要注意的是 paths
是相对于 baseUrl
进行解析。 如果 baseUrl
被设置成了除 .
外的其它值,那么映射必须要做相应的改变。 如果你在上例中设置了 "baseUrl": "./src"
,那么 app 应该映射到 app/*
。
当然,通过 paths
我们还可以指定复杂的映射,包括指定多个回退位置。这个可以查阅官方文档。