如何在 Angular 中动态加载外部脚本？

Question

我有这个模块，它将外部库与其他逻辑一起组件化，而无需将 <script> 标记直接添加到 index.html 中：

 import 'http://external.com/path/file.js'
//import '../js/file.js'

@Component({
    selector: 'my-app',
    template: `
        <script src="http://iknow.com/this/does/not/work/either/file.js"></script>
        <div>Template</div>`
})
export class MyAppComponent {...}

我注意到 ES6 规范的 import 是静态的，并且在 TypeScript 转译期间而不是在运行时解决。

无论如何要使其可配置，以便 file.js 将从 CDN 或本地文件夹加载？如何告诉 Angular 2 动态加载脚本？

原文由 CallMeLaNN 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您使用的是 system.js，则可以在运行时使用 System.import() ：

 export class MyAppComponent {
  constructor(){
    System.import('path/to/your/module').then(refToLoadedModule => {
      refToLoadedModule.someFunction();
    }
  );
}

如果您使用的是 webpack，则可以通过 require.ensure 充分利用其强大的代码拆分支持：

 export class MyAppComponent {
  constructor() {
     require.ensure(['path/to/your/module'], require => {
        let yourModule = require('path/to/your/module');
        yourModule.someFunction();
     });
  }
}

原文由 drew moore 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

Angular 具有防止用户直接干扰 html 输出的逻辑。所以你必须让 Angular 通过在 angular.json 文件中给出该方向来注入标签。

首先，您必须获取脚本文件。有两种方法：

1. 下载脚本文件（例如 somelibrary.js）

• 将其放在 资产 文件夹中
• 将脚本的相对路径放入 angular.json 文件的“脚本”部分：

 "scripts": [
  "src/assets/somelibrary.js"
]

1. 使用 npm/yarn 安装脚本：

• 将脚本的相对路径放入 angular.json 文件的“脚本”部分：

 "scripts": [
  "./node_modules/somelibrary/dist/somelibrary.min.js"
]

原文由 otsili 发布，翻译遵循 CC BY-SA 4.0 许可协议