延迟视图仅在独立组件内生效吗？NgModule组件异常咨询

核心结论 #

这不是Angular的预期行为，属于NgModule场景下@defer与独立组件兼容的早期版本问题。

问题原因 #

当父组件属于NgModule时，Angular的依赖解析与打包逻辑会出现冲突：

• NgModule的依赖树会强制解析所有直接/间接关联的组件，导致你标记为@defer的独立组件被提前打包进初始chunk，失去懒加载的意义。
• 即使组件已在初始包中，NgModule的视图更新逻辑没有正确触发@defer块的渲染切换，导致点击占位符后无变化。
• 而独立组件的依赖解析基于自身的imports数组，打包器能准确识别@defer的懒加载边界，将目标组件拆分到单独chunk，点击时才完成加载与渲染。

可行解决方案 #

• 避免在NgModule中关联独立组件：确保DeferComponent没有被添加到NgModule的declarations或imports中，也不要在初始加载的代码中直接引用。保持你原本的@defer代码即可，只要独立组件未被NgModule引用，打包器会自动拆分chunk：

  @defer (on interaction) {
      <app-defer></app-defer>
  }@placeholder {
      <p>click to load</p>
  }
  

• 升级Angular版本：Angular 16.1及后续版本修复了NgModule与@defer+独立组件的兼容问题，升级后可正常使用原有代码。
• 转为独立父组件：你已经验证此方案有效，这是最直接利用Angular新特性的方式，无需额外配置。

验证要点 #

• 检查angular.json的build配置，确保optimization和buildOptimizer为true，保证打包器正确拆分懒加载chunk。
• 打开浏览器控制台，查看是否有chunk加载失败或组件初始化错误的日志，排查潜在问题。

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