1. 前言
当我们的Angular项目越来越大之后，我们会发现我们的每一个模块都散落在很深层次的路径当中，当我们需要导入某个模块或者组件时，我们会发现我们import的TypeScript路径可读性非常的差。当然你可以说，我们强大的IDE不就帮我把这个解决了吗，其实我们完全可以写得更优雅一些，import的path完全不需要那么长，那么怎么解决这个问题呢？答案就是：TypeScript Path Mapping。
1 | // 这里举例说明 |
2 | import { something } from '../../../../../shared/shared.service'; |
2. How do you do it?
找到你Angular项目目录下的tsconfig.json文件，然后编辑paths配置，使用你自定义的有意义的路径名映射你要找到全路径。
1 | { |
2 | "compileOnSave": false, |
3 | "compilerOptions": { |
4 | "baseUrl": "./", |
5 | "typeRoots": [ |
6 | "node_modules/@types" |
7 | ], |
8 | "lib": [ |
9 | "es2018", |
10 | "dom" |
11 | ], |
12 | "paths": { |
13 | "@stubs/*": [ |
14 | "./src/app/stubs/*" |
15 | ], |
16 | "@state/*": [ |
17 | "./src/app/state/*" |
18 | ], |
19 | "@shared/*": [ |
20 | "./src/app/shared/*" |
21 | ] |
22 | } |
23 | }, |
24 | "angularCompilerOptions": { |
25 | "fullTemplateTypeCheck": true, |
26 | "strictInjectionParameters": true |
27 | } |
28 | } |
配置完成之后，接下来就可以优雅的更改我们之前的代码啦～
1 | // 配置好tsconfig.json中的paths之后的版本 |
2 | import { something } from '@shared/shared.service'; |