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"

未在Angular 2中的Lazy Load模块例程中加载内容

1 个答案: