Angular 2中的惰性加載模塊例程中未加載內容

Question

我爲模塊分開了路由。

這是我app.module.ts

import { NgModule, Component } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { RouterModule } from '@angular/router'; 

import { AppComponent } from "./app.component"; 

import appRoutes from "./app.routing"; 

import { HomeComponent } from "./app.routing"; 

@NgModule({ 
    imports:  [ BrowserModule, appRoutes ], 
    declarations: [ AppComponent, HomeComponent ], 
    bootstrap: [ AppComponent ] 
}) 

export class AppModule { 

} 

這是我app.routing.ts

import { RouterModule } from '@angular/router'; 

import { AppComponent } from "./app.component"; 

import { Component } from "@angular/core"; 

@Component({ 
    template : `I am from home` 
}) 

export class HomeComponent {} 


const routes = [ 
    { 
     path : "", 
     component : HomeComponent 
    }, 
    { 
     path : "contact", 
     loadChildren : "app/contact/contact.module" 
    } 

]; 

export default RouterModule.forRoot(routes); 

這是我contact.module.ts

import { NgModule } from "@angular/core"; 

import { CommonModule } from "@angular/common"; 

import { RouterModule } from "@angular/router"; 

import { ContactComponent } from "./contact.component"; 


const routes = [ 
    {path : "contact", component : ContactComponent} 
]; 

@NgModule({ 
    imports:  [ CommonModule, RouterModule.forChild(routes) ], 
    declarations: [ ContactComponent ], 
}) 

export default class ContactModule { 

} 

HomeComponent鏈接工作正常。但如果我聯繫路由沒有內容顯示在瀏覽器中

我找不到問題所在。任何幫助是極大的讚賞。

在此先感謝。

Answer 1

您必須指定你要加載模塊的名稱：

loadChildren : "app/contact/contact.module#ContactModule"