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

版权声明:著作权归作者所有。

相关推荐

基于webpack的vue项目使用别名避免../深路径

在vue的项目里,我们可以使用../这样的相对路径的方式引用不同目录的组件:import userinfo from '../../../components/userinfo.vue'; 使用../引用的路径比较深,定位路径和书写不方便,并且不直观。由于项目是基于webpack,比较好的做法是使用webpack对路径定义一个别名。在webpack.base.config.js找到resolve节

Angular CLI:解决webpack-dev-server报错Invalid Host Header

Angular cli底层是使用webpack,webpack默认会对访问的主机进行检测,这是为了防止主机受到DNS重新绑定攻击。解决方法根据运行的脚本不同分为两种情况解决。一、angular cli脚本如果是使用angular cli的脚本ng serve启动服务器,可以使用--disable-host-check解决。ng serve 

Angular CLI:配置webpack热模块替换hmr(Hot Module Replacement)

热模块替换(Hot Module Replacement)是Webpack的特性,它可以让我们在调试时不需要重新构建就可以更新代码到正在运行的应用。Angular CLI需要做一些设置就可以使用webpack的热模块替换功能。添加依赖hrm依赖于@angularclass/hmr,安装@angularclass/hmr到dev-dependency$ npm

查看angular cli版本

ng help version 查看帮助说明$ ng help version ng version <options...>  Outputs Angular CLI version.  aliases: v, --version, -v  --

ProgressDialog(deprecated )替代方案

ProgressDialog在API level 26被废弃,官方的解释是ProgressDialog是一个模态框(modal dialog),它会禁止与app的交互。可以在App的UI里嵌入ProgressBar作为它的替代方案。如果想实现模态框,也可以在AlertDialog里嵌入ProgressBar来实现。