非独立组件项目中能否使用Angular的@defer语法？

一、@defer 是否支持非独立项目？ #

完全支持。@defer 是Angular 16+推出的模板级懒加载语法，兼容传统的非独立组件/模块架构，不需要强制迁移到独立组件。

二、非独立项目中使用@defer的步骤 #

1. 把需要懒加载的组件封装到单独的NgModule中（比如LazyModule），确保该模块未被主模块直接导入：

   // lazy.module.ts
   import { NgModule } from '@angular/core';
   import { LazyComponent } from './lazy.component';
   
   @NgModule({
     declarations: [LazyComponent],
     exports: [LazyComponent]
   })
   export class LazyModule { }
   

2. 在主组件的模板中使用@defer包裹懒加载组件，Angular会自动处理模块的动态导入：

   <!-- app.component.html -->
   @defer (on viewport) {
     <app-lazy></app-lazy>
   } @placeholder {
     <p>加载中...</p>
   }
   

3. 执行生产构建：

   npm run build --configuration production
   

4. 检查dist目录，会生成对应的懒加载chunk文件（如chunk-xxxx.js）。

三、你在独立项目中未生成懒加载chunk的原因及修正方案 #

你之前的操作存在几个关键问题，导致未生成懒加载chunk：

1. 未使用生产构建：开发模式下Angular会做代码合并优化，不会拆分懒加载chunk，必须用生产构建触发拆分。
2. 可能提前导入了懒加载组件：如果主组件/主模块中已经显式import了被@defer的组件，Angular会将其打包进主chunk，不会拆分。
3. 组件未设置为独立组件：独立项目中被@defer的组件必须标记standalone: true，且未被主模块提前导入。

修正后的独立项目操作步骤：

1. 创建独立的懒加载组件：

   ng generate component lazy --standalone
   

2. 主组件模板中使用@defer，不要在主组件的.ts文件中导入LazyComponent：

   <!-- app.component.html -->
   @defer {
     <app-lazy></app-lazy>
   } @placeholder {
     <p>加载中...</p>
   }
   

3. 执行生产构建：

   npm run build --configuration production
   

4. 此时查看dist目录，就能看到生成的懒加载chunk文件。

四、如果需要迁移到独立组件的完整步骤 #

若你想将现有非独立项目转为独立架构以更好地使用@defer，可按以下步骤操作：

1. 将根组件改为独立组件：

   // app.component.ts
   import { Component } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { RouterModule } from '@angular/router';
   
   @Component({
     selector: 'app-root',
     standalone: true,
     imports: [CommonModule, RouterModule],
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent { }
   

2. 删除根模块AppModule，修改main.ts直接引导独立组件：

   // main.ts
   import { bootstrapApplication } from '@angular/platform-browser';
   import { AppComponent } from './app/app.component';
   
   bootstrapApplication(AppComponent);
   

3. 逐步将其他组件转为独立组件，移除对应的NgModule，组件间通过imports数组共享依赖。
4. 使用@defer懒加载独立组件，无需额外配置模块，直接在模板中使用即可。

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