Angular CLI v6模块化路由报错：嵌套路由问题求助

我来帮你梳理下这个问题的解决方向～

你提到已经把@angular/cli更新到v6版本，并且配置了模块化的路由懒加载，原配置代码是：

{ path: '', loadChildren: './components/home/home.module#HomeModule', pathMatch: 'full' }, 
{ path: 'blog', loadChildren: './components/blog/blog.module#BlogModule' }

结合Angular v6的版本特性来看，这个问题大概率是懒加载路由的语法兼容性问题导致的：

问题原因 #

Angular从v6版本开始，官方废弃了原有的字符串形式懒加载语法（'./xxx.module#XxxModule'），转而推荐使用ES6动态导入的语法。同时v6配套的CLI构建工具也对这种新语法做了更好的支持，旧语法在新版本中可能会触发解析错误。

解决方案 #

你只需要把路由配置中的懒加载写法替换成动态导入的箭头函数形式即可，修改后的代码如下：

const routes: Routes = [
  { 
    path: '', 
    loadChildren: () => import('./components/home/home.module').then(m => m.HomeModule), 
    pathMatch: 'full' 
  },
  { 
    path: 'blog', 
    loadChildren: () => import('./components/blog/blog.module').then(m => m.BlogModule) 
  }
];

额外检查点 #

如果修改后还是报错，可以再排查以下几点：

• 确认每个懒加载模块（比如HomeModule、BlogModule）都在各自的.module.ts文件中正确导出了对应的NgModule类
• 检查每个子模块是否正确导入了RouterModule并使用RouterModule.forChild()配置了子路由
• 清理项目缓存后重新启动：运行ng clean（如果CLI版本支持），或者删除node_modules、package-lock.json文件后重新执行npm install，再启动项目

内容的提问来源于stack exchange，提问作者Chiien