Angular 17：延迟加载共享组件

Question

（我找到的大多数答案都非常过时，并且不涉及独立组件）。

在我的 Angular 应用程序中，我有多个独立的共享组件。不幸的是，如果它们不是在路由定义文件中使用

loadComponent()

和

import()

的路由，我找不到一种方法来使它们延迟加载。

所以，我的申请中有这个：

src
- main
  - app
    - modules
      - shared
        - components
          - shared-component1.component.ts
          - shared-component2.component.ts

在现代 Angular 版本中是否有一种相对简单的方法来延迟加载共享的、独立的 Angular 组件？

Answer 1

您可以使用

@defer

块来实现这一点。要延迟加载组件，只需将其包装在模板中，如下所示：

@defer {
  <shared-component1 />
}