Angular发布了一个新的8.0版本，它改进了一些方法，编译器将bundle的大小减少了40%。现在是时候用延迟加载设计模式更新我之前的文章Angular Routing了。这篇文章是关于如何用Angular 8配置升级你的Angular 7应用，以及如何用Angular 8的loadChilder promise方法更改延迟加载路由。
必需的软件
- NodeJS Version 12+
- Angular Cli 8+
安装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';
import
{ LoginGuard
}
from
'
../guards/login.guard
'
;
import
{ IndexComponent
}
from
'
./index.component
'
;
export
const IndexRoutes
:
Route[]
= [
{
path
:
''
,
component
: IndexComponent
,
canActivate
: [LoginGuard]
,
children
: [
{
path
:
'
login
'
,
loadChildren
:
()
=>
import(
'
../index/login/login.module
')
.
then(m
=> m
.LoginModule)
},
{
path
:
'
signup
'
,
loadChildren
:
()
=>
import(
'
../index/signup/signup.module
')
.
then(m
=> m
.SignupModule)
},
{
path
:
'
forgot
'
,
loadChildren
:
()
=>
import(
'
../index/forgot/forgot.module
')
.
then(m
=> m
.ForgotModule)
},
{
path
:
'
system-error
'
,
loadChildren
:
()
=>
import(
'
../index/system-error/system-error.module
')
.
then(
m
=> m
.SystemErrorModule
)
}
]
}
]
;
home.routes.ts
使用promise响应加载模块。
import{Route}from'@angular/router';
import
{ AuthGuard
}
from
'
./../guards/auth.guard
'
;
import
{ HomeComponent
}
from
'
./home.component
'
;
export
const HomeRoutes
:
Route[]
= [
{
path
:
''
,
component
: HomeComponent
,
canActivate
: [AuthGuard]
,
children
: [
{
path
:
''
,
loadChildren
:
()
=>
import(
'
../home/dashboard/dashboard.module
')
.
then(
m
=> m
.DashboardModule
)
},
{
path
:
'
settings
'
,
loadChildren
:
()
=>
import(
'
../home/settings/settings.module
')
.
then(m
=> m
.SettingsModule)
},
{
path
:
'
products
'
,
loadChildren
:
()
=>
import(
'
../home/products/products.module
')
.
then(m
=> m
.ProductsModule)
},
{
path
:
'
user/:username
'
,
loadChildren
:
()
=>
import(
'
../home/user/user.module
')
.
then(m
=> m
.UserModule)
},
{
path
:
'
user/:username/:id
'
,
loadChildren
:
()
=>
import(
'
../home/user/user.module
')
.
then(m
=> m
.UserModule)
}
]
}
]
;
构建错误
当您执行生产构建“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基本文件。
{
"
extends
"
:
"
../tsconfig.json
"
,
"
compilerOptions
"
:
{
"
outDir
"
:
"
../out-tsc/app
"
,
"
module
"
:
"
commonjs
"
,
// or esnext
"
baseUrl
"
:
"
./
"
,
"
types
"
:
[]
},
"
exclude
"
:
[
"
src/test.ts
"
,
"
**/*.spec.ts
"
]
}