1、RouterModule.forRoot() 和 RouterModule.forChild()

RouterModule对象为提供了两个静态的方法:forRoot()和forChild()来配置路由信息。

RouterModule.forRoot()方法用于在主模块中定义主要的路由信息，RouterModule.forChild()与 Router.forRoot()方法类似，但它只能应用在特性模块中。

即根模块中使用forRoot()，子模块中使用forChild()。

2、懒加载：loadChildren

这里使用到了懒加载LoadChildren属性。这里没有将对应的模块导入到AppModule中，而是通过loadChildren属性，告诉Angular路由依据loadChildren属性配置的路径去加载对应的模块。这就是模块懒加载功能的具体应用，当用户访问 /xxx/** 路径的时候，才会加载对应的模块，这减少了应用启动时加载资源的大小。

loadChildren的属性值由三部分组成：

需要导入模块的相对路径

#分隔符

导出模块类的名称

3、优化： main.bundle.js

之前main.bundle.js的大小为1447KB 减少为 358KB

之后：

4、实现

根组件路由：

const appRoutes: Routes = [

    { path: '', redirectTo: 'home', pathMatch: 'full'},

{ path: 'login', loadChildren: './login/login.module#LoginModule' }, // 懒加载

{ path: '**', component: PageNotFoundComponent } // 注意要放到最后

];

咔咔组供稿