1. 前言

當(dāng)我們的Angular項(xiàng)目越來(lái)越大之后，我們會(huì)發(fā)現(xiàn)我們的每一個(gè)模塊都散落在很深層次的路徑當(dāng)中，當(dāng)我們需要導(dǎo)入某個(gè)模塊或者組件時(shí)，我們會(huì)發(fā)現(xiàn)我們import的TypeScript路徑可讀性非常的差。當(dāng)然你可以說(shuō)，我們強(qiáng)大的IDE不就幫我把這個(gè)解決了嗎，其實(shí)我們完全可以寫(xiě)得更優(yōu)雅一些，import的path完全不需要那么長(zhǎng)，那么怎么解決這個(gè)問(wèn)題呢？答案就是：TypeScript Path Mapping。

// 這里舉例說(shuō)明
import { something } from '../../../../../shared/shared.service';

2. How do you do it?

找到你Angular項(xiàng)目目錄下的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
  }
}

配置完成之后，接下來(lái)就可以?xún)?yōu)雅的更改我們之前的代碼啦～

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