1. 打包之后的文件运行问题

直接打开index.html 页面无法打开，控制台会报如下的错误：

是因为angular是基于npm环境搭建的，打包后的文件需要在模拟服务器上打开。
解决方案：可以全局安装npm的http-server模块。构建本地web模拟服务器。
安装方法：在cmd窗口执行命令：npm install http-server –g
使用方法：在index所在文件夹执行cmd窗口命令：hs –p 端口号 –o 即可打开运行。

2. 多级路由嵌套及懒加载问题

如果项目当中页面嵌套过多的情况，会出现路由嵌套的情况。

多级路由嵌套两种写法：
1）直接进行路由嵌套如下：
（左右/上下滑动可查看全部代码）

{
   path: 'dashboard', component: DashboardComponent, canDeactivate: [CanLeaveDetail],
   children: [
     { path: 'partA', component: DashboardPartAComponent },
     { path: 'partB', component: DashboardPartBComponent },
     { path: 'partC', component: DashboardPartCComponent }
   ]
}

2）懒加载模式：
主路由：（左右/上下滑动可查看全部代码）

{
   path: 'lifeCycle',
   canActivate: [AuthService],
   loadChildren: './LifecycleHooks/lifeCycleHooks.module#LifeCycleHooksModule'
}

子路由：（左右/上下滑动可查看全部代码）
{
   path: '', // 使用loadChildren方式此处路径为空
   component: LifeCycleHooksComponent,
   children: [
     { path: '', redirectTo:'componentLC', pathMatch: 'full'},
    { path: 'componentLC', component:ComponentLCComponent }
   ]
}

子路由全部用loadChildren加载，到这个路由的时候在加载路由下的模块及组件。
loadChildren格式：要加载的模块的相对地址#要加载的模块名称。
注意：子路由中的第一个path一定要为空。

本转载自 Think体验设计公众号。

原文链接：https://mp.weixin.qq.com/s/4bfahysRdH9pVST_UZ4cXg

创作场景

这里有本 Angular 修炼秘籍送你（一）