Angular项目 配置webpack alias 路径别名

转载文章，若有侵权，请联系删除。

转自： 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）。