Angular released a new version 8.0, which improves some methods, the compiler will bundle the size of a 40 percent reduction. Now is the time to update my previous article Angular Routing with the lazy loading pattern design. This article is about how to use Angular 8 configuration upgrade your Angular 7 applications and how to use Angular loadChilder promise 8. A method of routing changes lazy loading.
Required software
- NodeJS Version 12+
- Angular Cli 8+
Angular command-line installation
Install the latest node using a terminal or command promote and execute the following command.
$ npm install -g @angular/cli
$ git clone https://github.com/srinivastamada/angular-routing.git
$ cd angular-routing
angular-routing$ git checkout angular7
package.json
Use 7+ Update Project angular / cli version and perform npm install
"devDependencies": {
.....
"@angular/cli": "^7.3.7",
.....
}
The Angular upgrade 7-8
The following command attention main.ts, polyfills.ts and ets
Angular-routing $ ng update @ angular / cli @ angular / core
Update route
To understand the delayed loading design patterns, follow the route using the angle lazy loading design patterns.
Angular structure 8 for a new load module.
loadChildren: 'app/index/login/login.module#LoginModule'
到
loadChildren: () => import('./index/login/login.module').then(m => m.LoginModule)
index.routes.ts
Use promise response update 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
Use promise response to a load module.
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
"
]
}