Angular发布了一个新的8.0版本，它改进了一些方法，编译器将bundle的大小减少了40%。现在是时候用延迟加载设计模式更新我之前的文章Angular Routing了。这篇文章是关于如何用Angular 8配置升级你的Angular 7应用，以及如何用Angular 8的loadChilder promise方法更改延迟加载路由。
必需的软件
安装Angular命令行
安装最新节点并使用terminal或command promote执行以下命令。
$ npm install -g @angular/cli
$ git clone https://github.com/srinivastamada/angular-routing.git
$ cd angular-routing
angular-routing$ git checkout angular7
package.json
使用7+更新项目angular / cli版本并执行npm install
"devDependencies": {
.....
"@angular/cli": "^7.3.7",
.....
}
将Angular 7升级到8
以下命令将关注main.ts，polyfills.ts和ets
angular-routing$ ng update @angular/cli @angular/core
更新路由
要了解延迟加载设计模式，请遵循使用延迟加载设计模式的角度路由。
用于加载模块的新Angular 8结构。
loadChildren: 'app/index/login/login.module#LoginModule'
到
loadChildren: () => import('./index/login/login.module').then(m => m.LoginModule)
index.routes.ts
使用promise响应更新loadChilder。
import{Route}from'@angular/router';
home.routes.ts
使用promise响应加载模块。
import{Route}from'@angular/router';
构建错误
当您执行生产构建“ng build --prod”时，有时您将收到以下错误以更改模块标志。
ERROR in src/app/home/home.routes.ts(14,11): error TS1323: Dynamic import is only supported when '--module' flag is 'commonjs' or 'esNext'.
tsconfig.app.json
将模块es2105更新为commonjs。 甚至交叉验证tsconfig.json基本文件。
{
}