在 Angular 模块中延迟加载 JS答案

【问题标题】：Lazy Loading JS In Angular Modules在 Angular 模块中延迟加载 JS
【发布时间】：2019-01-01 02:00:58
【问题描述】：

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

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

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

【问题讨论】：

请记住，一旦构建了您的应用程序，您的所有库都存储在vendor 文件下。如果您不希望它们被捆绑，请将它们从您的节点模块中删除并将它们作为 TS 文件包含到您的模块中，这是我看到它的唯一方式。
这是个好主意，但其中一些是第三方 JS 库，可能难以转换为 TS，并且将来与原始 JS 库保持同步
我相信每个 JS 代码都是有效的 TS 代码，所以你应该没有任何问题。我理解第二点，但现在它不再与 Angular 或 Typescript 相关，它更像是一个 webpack 问题，我无法帮助你，抱歉！
不幸的是：/ JS 代码并非所有有效的 TS 代码 - 请参阅此处 stackoverflow.com/a/14413739/5952236
I am basing my statement on this question，您能解释一下为什么它不是有效代码吗？

标签： angular lazy-loading angular6

【解决方案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 {}

【讨论】：

【解决方案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);
  }

【讨论】：