angular2路由器延迟加载不注入组件

Question

我想做英雄教程中显示的使用路由器的懒加载angular2模块。在我的网络选项卡中，我可以看到的文件越来越下载在我的浏览器，但该组件没有在我的浏览器显示

//module 
@NgModule({ 
    declarations: [ 
    CustomerDashboardComponent 
    ], 
    exports: [ 
    CustomerDashboardComponent 
    ] 
}) 
export class CustomerDashboardModule { 
} 

//component code 
@Component({ 
    selector: 'customer-dashboard', 
    templateUrl: 'customer-dashboard/customer-dashboard.html', 
}) 
export class CustomerDashboardComponent extends OnInit{ 

    constructor(private router: Router, 
       private homeService: HomeService, 
       private restService: RestService 
) { 
    } 
} 

Answer 1

我没有看到你的路由器代码从延迟加载模块加载组件。一旦你的模块使用loadChildren加载，你的模块应该有一个默认路由选项来加载组件。在你的懒惰加载模块中添加默认路由，如下所示

//router code 
loadChildren: 'src/customer-dashboard/customer-dashboard.module#CustomerDashboardModule' 

//default routing definition code 
const routes: Routes = [ 
    { path: '', component: CustomerDashboardComponent } 
]; 
export const routing: ModuleWithProviders = RouterModule.forChild(routes); 

//routing import in module 
@NgModule({ 
    imports: [ 
    routing 
    ], 
    declarations: [ 
    CustomerDashboardComponent 
    ], 
    exports: [ 
    CustomerDashboardComponent 
    ] 
}) 
export class CustomerDashboardModule { 
} 

//component code 
@Component({ 
    selector: 'customer-dashboard', 
    templateUrl: 'customer-dashboard/customer-dashboard.html', 
}) 
export class CustomerDashboardComponent extends OnInit{ 

    constructor(private router: Router, 
       private homeService: HomeService, 
       private restService: RestService 
) { 
    } 
}