延迟加载，没有块 - Angular 7答案

【问题标题】：Lazy Loading, no chunks - Angular 7延迟加载，没有块 - Angular 7
【发布时间】：2022-04-22 00:59:30
【问题描述】：

我正在尝试进行延迟加载，并按照角度的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 { }

我注意到它在我发球时会产生块。

我是否正确实现了延迟加载？

【问题讨论】：

能不能把你的prospect.module的代码也放上来
@DulanjayaTennekoon 好吧，我会说的。
您在更新中包含的是另一个路由模块。可以添加 ProspectModule
@DulanjayaTennekoon 添加了其他模块
看起来一切都很好。但是在 Angular 4 中的导入 RouterModule.forRoot(routes) 中存在一个问题，其中没有出现块。我仍然不确定这是否是问题

标签： angular angular2-routing lazy-loading

【解决方案1】：

您是否在您的应用中使用延迟加载模块中的服务？如果你不使用共享模块，你可以打破延迟加载。

【讨论】：

我没有使用服务。我所做的只是按照角度文档延迟加载中的分步说明进行操作。 (angular.io/guide/…

【解决方案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' }
];

【讨论】：

【解决方案3】：

确保不要在 tsconfig.json compilerOptions 部分中使用 "module": "commonjs"。试试“模块”：“esnext”

【讨论】：