angular - 在 Angular 模块中延迟加载 JS

Question

我在 Angular 6 应用程序中延迟加载一些功能模块。其中一些功能模块依赖于其他模块不使用的 JS 库，还有一些在延迟加载模块之间共享。

目前，我将这些库包含在 scripts 数组的 angular.json 配置中，但这意味着所有这些库都与应用程序的其余部分一起预先加载，甚至尽管它们仅由延迟加载的模块使用。

有没有办法用延迟加载的模块来延迟加载 JS 库？ 我不想在组件中延迟加载它(请参阅 How to load external scripts dynamically in Angular? )，因为这意味着在模块内跨组件复制导入，我想知道这是否可以跨模块完成。

Answer 1

我们也有同样的情况，从我们的测试来看，如果模块是延迟加载的，你可以简单地只在延迟加载模块中导入外部JS文件，然后在访问该模块时就会加载这个JS库，下面是我们导入anychart.js库的测试示例。

/// <reference path="../../../node_modules/anychart/dist/index.d.ts"/>
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

// third-party js lib
import '../../../node_modules/anychart/dist/js/anychart-base.min.js';

import { OrdersRoutingModule } from './orders-routing.module';
import { OrderListComponent } from './order-list/order-list.component';

@NgModule({
  imports: [CommonModule, OrdersRoutingModule],
  declarations: [OrderListComponent]
})
export class OrdersModule {}