有没有办法在 Angular 中延迟加载组件而不是模块？

Question

延迟加载是一种常用的技术。然而，在 Angular 中，这种技术的粒度级别似乎停止在模块级别。

这意味着您可以在浏览器中加载模块 main，然后在特殊情况下可以延迟加载模块 B、C 和 D。

几乎所有网络教程都解释了这一点。但是，有没有办法懒加载组件呢？

考虑这个简单的例子，用户进入应用程序，当点击“发票”链接时，URL 更改为新路由 /invoice/list 并且进度条显示正在加载，而包含 HTML 和 JS 的 invoices 组件正在在浏览器中加载，在主模块中动态注册，并显示在相关插座中。 Angular 有可能吗？

Answer 1

不能延迟加载组件。 这种行为的原因是角度的结构。角度组件必须是模块的一部分。 Angular 模块是一个容器，您可以在其中定义所有组件、服务、管道等。呈现在里面。 在构建应用程序 dist 时，包含在模块中声明的所有依赖项以组成一个块（转译的 js 代码）。 所有直接导入的模块一起形成主块，而标记为延迟加载的模块形成一个单独的块，该块位于服务器上，直到相应的路由被命中并从客户端发出对其的调用。 现在组件不会形成块，因此不可能

Answer 2

目前（Angular 8 时间框架）有两个 3rd 方库可以更轻松地延迟加载组件：

• ngx 可加载：https://github.com/mohammedzamakhan/ngx-loadable
• 英雄加载器：https://www.npmjs.com/package/@herodevs/hero-loader

注意：这两个库都是基于 NgModuleFactoryLoader 构建的，在 Angular 8 中已弃用，但目前还没有其他选择...

• 标记为已弃用的类：https://angular.io/api/core/NgModuleFactoryLoader
• Angular 团队 Rob Wormald 的解释：https://twitter.com/robwormald/status/1143981312237137925

Angular 团队已经宣布，使用 Ivy（Angular 9？）组件的延迟加载应该会变得更容易，但目前还不清楚这会是什么样子......

Answer 3

有点 hacky ...但可能（Angular 的未来版本（超过版本 7）将实现更简单的方法）

https://blog.angularindepth.com/dynamically-loading-components-with-angular-cli-92a3c69bcd28

Answer 4

更新，使用 Angular 9 和 Ivy 是可能的并且相对容易。 首先，你需要在你的应用程序中有一些锚点来加载你的组件，如果你想要多个不同的组件，它可以命名为templateRef，或者ng-template 一个。为此（我将在您的 component.html:

中使用ng-template）

<ng-template>

component.ts：

export class ExampleComponent {
    @ViewChild(TemplateRef, { read: ViewContainerRef })
    private anchorRef: ViewContainerRef;

    constructor(
        private readonly componentFactoryResolver: ComponentFactoryResolver
    ) {}

    private async loadComponent() {
        this.anchorRef.clear(); // clear if some components are already there
        const { component } = await import(
            'path to your component'
        );
        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
            component
        );
        // We could attach @Input and react to @Output by using below instance if needed.
        // Remember we should handle the ngOnChanges lifecycle hook.
        // For that implementation needed.
        this.anchorRef.createComponent(componentFactory);
    }
}

剩下的基本上就是在需要时调用loadComponent；

如果你需要一些模块，例如你想使用 Angular Material。您需要在您的lazyLoaded 组件中创建简单的 ngModule 而不导出。像这样：

@Component({...})
export class Component implements OnInit {
    constructor() {}

    ngOnInit() {}
}

@NgModule({
    declarations: [Component],
    imports: [MatIconModule],
})
class TasksListModule {}

此外，您可以遵循 Angular 团队在他们的文档中提供的方法： https://angular.io/guide/dynamic-component-loader