发布于 1年前

angular cli配置路径别名替代webpack alias的方案

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)。

参考:https://github.com/angular/angular-cli/issues/1465

©2020 edoou.com   京ICP备16001874号-3