Question

通过将它们添加到.angular-cli文件的 scripts 属性，可以将全局脚本加载到您的应用程序中。此示例来自documentation：

"scripts": [
  "global-script.js",
  { "input": "lazy-script.js", "lazy": true },
  { "input": "pre-rename-script.js", "output": "renamed-script" },
]

然而，我对“懒惰”属性感到有点困惑。构建应用程序时，不再将待加载的脚本打包在scripts.bundle.js文件中。

但是如何加载库呢？如有必要，我该怎么做才能加载文件？

Answer 1

作为在Will Huang接受的答案的第2步中操纵DOM的替代方法，现在也可以使用esnext的动态导入功能与TypeScript一起使用，如this post中所述。

使用这种方法，可以将以下内容添加到延迟加载的NgModule：

import('jquery')
    .then((module: Function) => {
        window['$'] = module;
    });

Answer 2

如果配置＆＃34;懒惰＆＃34;在.angular-cli.json中加载全局库的属性，你需要＆＃34;延迟加载＆＃34;需要时的脚本。以下是设置步骤。

1.在.angular-cli.json数组中配置apps[0].scripts。

"scripts": [
    { "input": "../node_modules/jquery/dist/jquery.js", "output": "jquery", "lazy": true }
],

您将在构建输出中获得jquery.bundle.js文件。

2.通过在DOM（<script>）中懒洋洋地附加<head>标记来加载生成的脚本。

const script = document.createElement('script');
script.src = 'jquery.bundle.js';
script.type = 'text/javascript';
script.async = true;
script.charset = 'utf-8';
document.getElementsByTagName('head')[0].appendChild(script);

在angular-cli中，“lazy”属性如何加载全局库？

2 个答案: