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 
) { 
    } 
}