Angular2延迟加载不显示数据但在网络中加载html页面

Question

Angular2 LazyLoading 当我点击 Link 它加载它的组件，Html 页面，模块但不显示 Html 页面 <router-outlet>

主页

<a [routerLink]="['Customer/Add']">Customer</a><br />
<a [routerLink]="['Employee/Add']">Employee</a><br />
    <router-outlet>
    </router-outlet>

CustomerComponent

import { Component } from "@angular/core"    
@Component({
     templateUrl: '../../ui/customer/customer.html'
})
export class CustomerComponent {

}

客户模块

@NgModule({
    imports: [RouterModule.forChild(CustomerRoute), ReactiveFormsModule, CommonModule, ReactiveFormsModule, FormsModule, HttpModule],
    declarations: [CustomerComponent],
    bootstrap: [CustomerComponent]
}) 
export class CustomerModule {    
}

客户路线

import { Component } from "@angular/core"
import { CustomerComponent } from "../components/customer/customercomponent"

export const CustomerRoute = [
    { path: "Add", Component: CustomerComponent}
    ]

主干道

import { Component } from "@angular/core"
import { Routes } from "@angular/router"
import { HomePageComponent } from "../components/homepage/homepage"
export const ApplicationRoutes= [
    { path: '', component: HomePageComponent },
    { path: 'UI/MasterAngularPage.html' ,component: HomePageComponent },
    { path: 'Customer', loadChildren: '../modules/customermodule/customermodule#CustomerModule'},

]

Answer 1

使用以下代码在添加路由时重定向。

export const CustomerRoute = [
    { path: "", redirectTo: "Add", pathMatch:"full"},
    { path: "Add", Component: CustomerComponent}
]

从 CustomerModule 中删除 bootstrap 代码。

@NgModule({
    imports: [RouterModule.forChild(CustomerRoute), ReactiveFormsModule, CommonModule, ReactiveFormsModule, FormsModule, HttpModule],
    declarations: [CustomerComponent]
})

希望对您有所帮助

Angular2延迟加载不显示数据但在网络中加载html页面

Angular2 Lazy loading not displaying data but loading htmlpage in Network

angular2-routing

angular4-router