延迟加载，无块-Angular 7

Question

我正在尝试进行延迟加载， 并遵循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 { }

我注意到当我上菜时会产生块状。

我正确实现了懒惰搜索吗？

Answer 1

您是否在应用程序中使用了延迟加载模块中的服务？如果您不使用共享模块，则可以中断延迟加载。

Answer 2

如果我更改了您的应用路由的路由常量，请执行此操作...

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' }
];