在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 {}