Angular预加载模块构造函数未触发问题求助

1. CustomersModule未被加载：

   • 在app-routing.module.ts中，customers路由直接绑定component: CustomersComponent，未关联CustomersModule；同时CustomersModule未加入AppModule的imports数组，导致模块从未被Angular初始化，构造函数自然不会执行。
   • customers-routing.module.ts存在严重错误：导入了OrdersComponent，路由配置指向Orders功能，类名还错误写成OrdersRoutingModule，完全不符合Customers模块的路由需求。

2. OrdersModule被当作懒加载处理：

   • 即便你在loadChildren中同步返回OrdersModule，Angular默认仍会将使用loadChildren的路由判定为懒加载路由，只有用户访问该路由时才会加载模块，这就是构造函数仅在点击Orders按钮时触发的原因。

一、修复CustomersModule的加载问题 #

1. 修正customers-routing.module.ts #

替换为符合Customers模块的正确路由配置：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CustomersComponent } from './customers.component';

const routes: Routes = [{ path: '', component: CustomersComponent }];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class CustomersRoutingModule { }

2. 实现CustomersModule预加载 #

有两种可选方式：

• 方式A：启动时直接加载
  在AppModule的imports数组中添加CustomersModule，应用启动时就会初始化该模块：

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { CustomersModule } from './customers/customers.module';
  
  @NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AppRoutingModule, CustomersModule],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

  同时修改app-routing.module.ts的customers路由为模块加载形式：

  const routes: Routes = [
    { path: 'customers', loadChildren: () => CustomersModule },
    { path: 'orders', loadChildren: () => OrdersModule }
  ];
  

• 方式B：空闲时预加载
  保持路由的loadChildren配置，在AppRoutingModule中开启全量预加载策略，Angular会在应用启动后空闲时自动加载所有懒加载模块：

  import { NgModule } from '@angular/core';
  import { RouterModule, Routes, PreloadAllModules } from '@angular/router';
  import { CustomersModule } from './customers/customers.module';
  import { OrdersModule } from './orders/orders.module';
  
  const routes: Routes = [
    { path: 'customers', loadChildren: () => CustomersModule },
    { path: 'orders', loadChildren: () => OrdersModule }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes, {
      preloadingStrategy: PreloadAllModules
    })],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  

二、实现OrdersModule预加载 #

同样可采用上述两种方式：

• 方式A：将OrdersModule加入AppModule的imports数组，启动时直接加载模块。
• 方式B：依赖上述配置的PreloadAllModules策略，应用启动后空闲时自动加载OrdersModule，无需用户触发路由。

修复完成后，启动应用时（或启动后短时间内），CustomersModule和OrdersModule的构造函数都会执行；点击对应按钮时，组件能正常渲染。

内容的提问来源于stack exchange，提问作者janci