Angular 4应用中实现懒加载遇问题，寻求技术解决方案

兄弟，我看你这代码里的问题挺典型的，搞懒加载的时候最容易踩这个坑！咱们一步步来捋清楚哪里错了，怎么改。

核心问题点 #

你在app.module.ts里直接把OverviewComponent放进了declarations数组里——这可是懒加载的大忌！懒加载的组件绝对不能在主模块或者任何已经被主模块导入的模块里声明，必须把它放到专属的懒加载模块里，才能让Angular在需要的时候才加载它。

具体修改步骤 #

1. 给懒加载组件创建专属模块

先给OverviewComponent建一个overview.module.ts，把组件归到这个模块里：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { OverviewComponent } from './overview.component';
import { RouterModule } from '@angular/router';

// 配置该模块的子路由（访问/overview时直接显示Overview组件）
const routes = [
  { path: '', component: OverviewComponent }
];

@NgModule({
  declarations: [OverviewComponent], // 这里才是放懒加载组件的正确位置
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ]
})
export class OverviewModule { }

2. 修改主路由配置（routing.module.ts）

主路由里要换成懒加载的写法，用loadChildren指定模块路径（Angular 4要用字符串格式，新版本的动态导入是Angular 8+才支持的）：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const appRoutes: Routes = [
  // 懒加载配置：当访问/overview路径时，才加载OverviewModule
  { 
    path: 'overview', 
    loadChildren: './application/overview/overview.module#OverviewModule'
  },
  // 其他主路由配置...
];

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

3. 清理主模块（app.module.ts）

把OverviewComponent从主模块的declarations里删掉，主模块只保留最核心的内容：

import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
    // 删掉OverviewComponent！
  ],
  imports: [
    RoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

补充说明 #

这么改的原因很简单：懒加载的核心就是让模块在用户访问对应路径时才被加载打包。如果你在主模块里提前声明了组件，Angular启动时就会把它塞进主bundle里，完全失去了懒加载优化体积的意义。

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