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

Answer 2

在app.component.ts文件中添加以下代码，并在ngOnInit（）方法中加载外部js库。

ngOnInit() {
    this.loadScript('../assets/js/custom.js');
  }

  public loadScript(url: string) {
    const body = <HTMLDivElement> document.body;
    const script = document.createElement('script');
    script.innerHTML = '';
    script.src = url;
    script.async = false;
    script.defer = true;
    body.appendChild(script);
  }

在Angular模块中延迟加载JS

2 个答案: