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

小编典典

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

javascript

我有这个模块，它将外部库与其他逻辑一起组成组件，而无需将<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 {...}

我注意到importES6规范是静态的，并且在TypeScript编译期间而不是在运行时进行了解析。

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

阅读 736

2020-04-25

共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();
     }); 
  }
}

2020-04-25