我正在尝试进行延迟加载,并按照角度的official docs中的步骤进行操作。问题是没有显示的块。
有没有我忘记造成这种情况的步骤?
应用路由
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: 'prospect',
loadChildren: './prospect/prospect.module#ProspectModule'
},
{
path: 'customer',
loadChildren: './customer/customer.module#CustomerModule'
},
{
path: '',
redirectTo: '',
pathMatch: 'full'
}
// { path: '**', redirectTo: '/error-404' }
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { useHash: true })
],
exports: [RouterModule]
})
export class AppRoutingModule { }
前景路由
import { NgModule } from '@angular/core';
import { ProspectComponent } from './prospect.component';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: '',
component: ProspectComponent
},
{
path: '',
redirectTo: '',
pathMatch: 'full'
}
];
@NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [RouterModule]
})
export class ProspectRoutingModule { }
前景模块
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CustomerRoutingModule } from './customer-routing.module';
import { CustomerComponent } from './customer.component';
@NgModule({
imports: [
CommonModule,
CustomerRoutingModule
],
declarations: [CustomerComponent],
})
export class CustomerModule { }
客户路由
import { NgModule } from '@angular/core';
import { CustomerComponent } from './customer.component';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: '',
component: CustomerComponent
},
{
path: '',
redirectTo: '',
pathMatch: 'full'
}
];
@NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [RouterModule]
})
export class CustomerRoutingModule { }
客户模块
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProspectRoutingModule } from './prospect-routing.module';
import { ProspectComponent } from './prospect.component';
@NgModule({
imports: [
CommonModule,
ProspectRoutingModule
],
declarations: [ProspectComponent]
})
export class ProspectModule { }
我是否正确实现了Lazy加载?
你在你的应用程序中使用延迟加载模块的服务吗?如果您不使用共享模块,则可以中断延迟加载。
我改变你的应用程序路由的路由常量,请这...
const routes: Routes = [
{
path: '',
redirectTo: 'prospect',
pathMatch: 'full'
},
{
path: 'prospect',
loadChildren: './prospect/prospect.module#ProspectModule'
},
{
path: 'customer',
loadChildren: './customer/customer.module#CustomerModule'
},
// { path: '**', redirectTo: '/error-404' }
];