Angular 5路由配置错误：将Module作为Component传入致组件工厂找不到

嘿，我一眼就看出问题出在哪了——你在路由配置里犯了个常见的新手错误：把**模块（Module）当成组件（Component）**指定给路由的component属性了！

错误原因拆解 #

1. 路由配置错误：Angular路由的component字段要求传入的是一个组件类（比如LoginComponent），但你写的{ path: 'login', component: LoginModule }里的LoginModule是模块类，Angular找不到对应的组件工厂，自然就抛出了这个错误。
2. 子模块的bootstrap配置冗余：只有根模块AppModule才需要设置bootstrap属性来指定应用的启动组件，LoginModule和HomeModule作为子模块，完全不需要这个配置。
3. 模块导入方式不符合分离需求：你直接把两个子模块都导入到AppModule里，其实没有实现真正的代码分离，推荐用懒加载来让模块按需加载。

解决方法 #

我给你两种方案，你可以根据需求选择：

方案一：基础修复（不使用懒加载）

适合简单场景，快速解决错误：

1. 调整子模块配置
   去掉bootstrap，并导出组件让根模块能访问：
   login.module.ts修改后：

   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { LoginComponent } from './login/login.component';
   
   @NgModule({
     imports: [
       CommonModule // 子模块无需重复导入BrowserModule，根模块已导入
     ],
     declarations: [LoginComponent],
     exports: [LoginComponent] // 导出组件，供根模块路由使用
   })
   export class LoginModule { }
   

   home.module.ts同理修改：

   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { HomeComponent } from './home/home.component';
   
   @NgModule({
     declarations: [HomeComponent],
     imports: [
       CommonModule
     ],
     exports: [HomeComponent]
   })
   export class HomeModule { }
   

2. 修正根模块路由
   路由指向组件而非模块：

   import { Routes, RouterModule } from '@angular/router';
   import { LoginComponent } from './login/login.component';
   import { HomeComponent } from './home/home.component';
   
   const appRoutes: Routes = [
     { path: 'login', component: LoginComponent }, // 这里用组件类
     { path: 'home', component: HomeComponent },
     { path: '', redirectTo: '/login', pathMatch: 'full' }
   ];
   
   @NgModule({
     declarations: [
       AppComponent
     ],
     imports: [
       BrowserModule,
       LoginModule,
       HomeModule,
       RouterModule.forRoot(appRoutes)
     ],
     providers: [],
     bootstrap: [AppComponent] // 仅根模块保留bootstrap
   })
   export class AppModule { }
   

方案二：推荐使用懒加载（实现真正的模块分离）

这种方式会把登录和主页模块打包成独立的代码块，只有用户访问对应路径时才加载，优化应用初始加载速度：

1. 子模块配置路由
   子模块自己配置路由，去掉bootstrap：
   login.module.ts修改后：

   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { LoginComponent } from './login/login.component';
   import { RouterModule, Routes } from '@angular/router';
   
   // 子模块内部配置路由，path为空对应父路由的/login
   const loginRoutes: Routes = [
     { path: '', component: LoginComponent }
   ];
   
   @NgModule({
     imports: [
       CommonModule,
       RouterModule.forChild(loginRoutes) // 子模块用forChild注册路由
     ],
     declarations: [LoginComponent]
   })
   export class LoginModule { }
   

   home.module.ts同理修改：

   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { HomeComponent } from './home/home.component';
   import { RouterModule, Routes } from '@angular/router';
   
   const homeRoutes: Routes = [
     { path: '', component: HomeComponent }
   ];
   
   @NgModule({
     declarations: [HomeComponent],
     imports: [
       CommonModule,
       RouterModule.forChild(homeRoutes)
     ]
   })
   export class HomeModule { }
   

2. 根模块配置懒加载路由
   使用loadChildren代替component，无需手动导入子模块：

   import { Routes, RouterModule } from '@angular/router';
   
   const appRoutes: Routes = [
     { 
       path: 'login', 
       // 懒加载LoginModule，访问/login时才加载该模块代码
       loadChildren: () => import('./login/login.module').then(m => m.LoginModule) 
     },
     { 
       path: 'home', 
       loadChildren: () => import('./home/home.module').then(m => m.HomeModule) 
     },
     { path: '', redirectTo: '/login', pathMatch: 'full' }
   ];
   
   @NgModule({
     declarations: [
       AppComponent
     ],
     imports: [
       BrowserModule,
       RouterModule.forRoot(appRoutes)
       // 无需再导入LoginModule和HomeModule，懒加载会自动处理
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

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