Angular 5路由模块化：特征模块路由拆分后如何避免自动懒加载？

嗨，这个问题我太熟悉了！你现在用的loadChildren语法确实会触发Angular的懒加载机制，因为这就是框架用来识别“按需加载模块”的标记。想要既保持路由模块化拆分，又让模块在应用启动时就加载，其实有两种很实用的方法，我给你详细说说：

方法一：直接导入特征模块到主模块 #

这种方式最直观，核心就是把特征模块直接加入主模块的imports数组，同时让特征模块自己管理内部路由：

1. 给特征模块配置独立的路由模块
   比如你的LoginModule，先创建对应的路由文件login-routing.module.ts：

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

// 特征模块自己的路由配置
const loginRoutes: Routes = [
  { path: 'login', component: LoginComponent }
];

@NgModule({
  imports: [RouterModule.forChild(loginRoutes)], // 用forChild注册子路由
  exports: [RouterModule]
})
export class LoginRoutingModule { }

2. 在特征模块中导入并导出路由模块
   修改login.module.ts，确保路由模块被导入，这样路由配置才会生效：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login.component';
import { LoginRoutingModule } from './login-routing.module';

@NgModule({
  declarations: [LoginComponent],
  imports: [
    CommonModule,
    LoginRoutingModule
  ]
})
export class LoginModule { }

3. 主模块直接导入特征模块
   在app.module.ts的imports里加入LoginModule，这样应用启动时就会加载整个Login模块，它的路由也会被自动注册到主路由器：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { LoginModule } from './login/login.module';

// 主路由保留全局路由配置
const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent }
];

@NgModule({
  declarations: [AppComponent, HomeComponent],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    LoginModule // 直接导入，启动时加载
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这样一来，/login路由就能正常访问，而且Login模块是在应用初始化时就加载完成的，完全没有懒加载的延迟。

方法二：合并特征模块的路由数组到主路由 #

如果你更倾向于在主路由里统一管理路由结构，也可以直接把特征模块的路由数组合并到主路由中：

1. 特征模块的路由文件导出路由数组
   修改login-routing.module.ts，把loginRoutes导出：

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

// 导出路由数组，供主路由使用
export const loginRoutes: Routes = [
  { path: 'login', component: LoginComponent }
];

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

2. 主路由中展开特征模块的路由数组
   在app-routing.module.ts里导入loginRoutes，用扩展运算符合并到主路由：

import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { loginRoutes } from './login/login-routing.module';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  ...loginRoutes // 合并特征模块路由
];

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

3. 主模块依然要导入特征模块
   别忘了在app.module.ts里导入LoginModule，否则LoginComponent会找不到：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { LoginModule } from './login/login.module';

@NgModule({
  declarations: [AppComponent, HomeComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LoginModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

核心原理总结 #

本质上就是避免使用loadChildren语法——这个语法是Angular用来识别懒加载模块的关键标记。改用直接导入模块或合并路由数组的方式，框架就会把特征模块视为应用初始化的一部分，在启动时就完成加载，完美满足你“缩短加载时间”的需求。

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