使用ModuleWithProviders时Angular路由异常问题求助

看起来你遇到的问题是因为重构OnboardingModule为ModuleWithProviders结构后，路由没有被正确加载导致的。让我帮你分析一下：

原来的OnboardingModule直接导入了OnboardingRoutingModule，所以当主路由通过loadChildren加载它时，路由规则会被正确注册。但重构后，你把路由模块移到了RootOnboardingModule里，而主路由仍然在加载基础的OnboardingModule——这个模块根本没有包含任何路由配置，路由器找不到/onboarding对应的组件，就触发了意外的重定向到/onboarding/home。

这里有两个可行的解决方案：

方案1：更新主路由的loadChildren为函数形式，调用forRoot() #

修改你的app-routing配置，把字符串形式的loadChildren改成函数，明确调用OnboardingModule.forRoot()来加载包含路由的RootOnboardingModule：

const ROUTES: Routes = [
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
  { 
    path: 'onboarding', 
    // 使用函数形式加载forRoot返回的模块
    loadChildren: () => import('./onboarding/onboarding.module').then(m => m.OnboardingModule.forRoot().ngModule)
  },
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  // { path: '**', redirectTo: 'home' }
];

这样路由器会正确加载带有OnboardingRoutingModule的RootOnboardingModule，就能匹配/onboarding路径到对应的组件了。

方案2：调整模块结构，让基础模块包含路由 #

如果你的forRoot()只是用来提供服务，不需要拆分出单独的RootOnboardingModule，可以把路由模块移回基础的OnboardingModule：

@NgModule({
  imports: [
    SharedModule,
    AngularFirestoreModule,
    OnboardingRoutingModule // 把路由移回这里
  ],
  declarations: [OnboardingComponent]
})
export class OnboardingModule { 
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: OnboardingModule,
      providers: [], // 在这里添加你的服务配置
    };
  }
}

然后主路由可以保持原来的字符串形式（如果不需要调用forRoot()的话），或者同样改成函数形式调用forRoot()来加载带服务的模块。

另外，你可以暂时取消根路由里**的注释，测试一下是否还有其他路由冲突，但核心问题肯定是子模块的路由没有被正确加载到路由器中。

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