为项目引用资源添加路径映射即使用 @* 替换相对路径

存在的问题以及解决方式

在项目中会遇到目录结构嵌套比较深的情况，这样会导致最深处的文件想引用根目录或者外层的资源会有这样的情况：

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 我们还可以指定复杂的映射，包括指定多个回退位置。这个可以查阅官方文档。