Angular 4懒加载异常求助：默认显示懒加载组件且二次点击报错

嘿，作为刚接触Angular的新手，碰到懒加载的问题太正常啦！我帮你拆解下你遇到的两个问题，大概率是路由配置或者模块导入的小疏忽～

问题1：应用启动默认显示懒加载组件而非Home组件 #

这个问题几乎都是根路由配置的顺序或默认路由指向错误导致的，Angular路由是按从上到下的顺序匹配路径的，优先级很高。你可以从这几点排查：

• 检查根路由文件（app-routing.module.ts）里的默认路由（path: ''）是不是正确指向了HomeComponent，而且这个路由要放在所有其他路由的最前面，避免被后面的路由提前匹配。
• 确认懒加载路由的path是具体的名称（比如'lazy'），而不是空字符串。如果懒加载路由的path设为''，启动时就会直接匹配它，跳过Home组件。

举个正确的根路由配置示例：

const routes: Routes = [
  // 默认路由放在最前面，优先匹配
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  // 懒加载路由用具体路径
  { path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) },
  // 兜底路由，匹配不到的路径跳回Home
  { path: '**', redirectTo: '' }
];

另外还要检查懒加载模块的路由配置（比如lazy-routing.module.ts），里面的路由应该用空路径对应根路由里的懒加载路径，比如：

const routes: Routes = [
  // 这里的空路径对应根路由的/lazy路径
  { path: '', component: LazyComponent }
];

问题2：再次点击懒加载路由报错 #

这个最常见的原因是懒加载模块被重复导入了！你要重点检查这几点：

• 打开app.module.ts，看imports数组里有没有直接导入你的懒加载模块（比如LazyModule）。如果有的话，Angular会把它当成常规模块加载，而不是懒加载模块，再次点击路由时就会因为重复初始化路由服务报错。一定要删掉这个导入，只通过根路由的loadChildren引用。
• 检查懒加载模块的路由配置，确保用的是RouterModule.forChild(routes)，而不是forRoot()。forRoot()是根路由专用的，懒加载模块必须用forChild()，否则会导致路由服务重复初始化，触发报错。
• 如果路径拼写错误，第一次加载可能侥幸成功，但第二次缓存冲突也会报错，所以确认loadChildren里的模块路径有没有写错。

给你一个正确的懒加载模块配置示例：

// lazy.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LazyRoutingModule } from './lazy-routing.module';
import { LazyComponent } from './lazy.component';

@NgModule({
  declarations: [LazyComponent],
  imports: [
    CommonModule,
    LazyRoutingModule // 导入自己的路由模块，用forChild
  ]
})
export class LazyModule { }

按照上面的步骤排查，应该能解决你的问题啦！如果还有具体的报错信息，可以再补充，能更精准定位～

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