Angular import path 最佳实践

1. 前言

当我们的Angular项目越来越大之后，我们会发现我们的每一个模块都散落在很深层次的路径当中，当我们需要导入某个模块或者组件时，我们会发现我们import的TypeScript路径可读性非常的差。当然你可以说，我们强大的IDE不就帮我把这个解决了吗，其实我们完全可以写得更优雅一些，import的path完全不需要那么长，那么怎么解决这个问题呢？答案就是：TypeScript Path Mapping。

// 这里举例说明
import { something } from '../../../../../shared/shared.service';

2. How do you do it?

找到你Angular项目目录下的tsconfig.json文件，然后编辑paths配置，使用你自定义的有意义的路径名映射你要找到全路径。

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "@stubs/*": [
        "./src/app/stubs/*"
      ],
      "@state/*": [
        "./src/app/state/*"
      ],
      "@shared/*": [
        "./src/app/shared/*"
      ]
    }
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

配置完成之后，接下来就可以优雅的更改我们之前的代码啦～

// 配置好tsconfig.json中的paths之后的版本
import { something } from '@shared/shared.service';