转载文章,若有侵权,请联系删除。
转自: https://majing.io/posts/10000018711176
作者:devgirl
Angular cli内部是基于webpack实现构建项目:
- 默认是没有webpack的配置文件webpack.config.js。
- 部分与webpack相关的配置可以在.angular-ci.json中设置。
- 如果需要定制的webpack.config.js,则需要使用eject命令发射出webpack.config.js
webpack alias可以让我们对路径设置别名,在模块之间引用是使用的是绝对路径,而不是../../../../mypath/MyComponent这种不直观的相对路径。
在.angular-cli.json中是没有提供类似webpack alias的配置。替代方案是使用tsconfig.json来配置。在angular-cli生成的项目修改如下:
在src/目录下修改tsconfig.app.json
{ "compilerOptions": { ... // 添加路径相关 "baseUrl": ".", "paths": { "@app/*": ["app/*"] } ... }, ... }
在项目根目录下修改tsconfig.json
{ "compilerOptions": { ... // 添加路径相关 "baseUrl": "src", "paths": { "@app/*": ["app/*"] } ... }, ... }
修改项目根目录的tsconfig.json是避免编译器报错(如webstorm)。