我有这个模块,它将外部库与其他逻辑一起组成组件,而无需将<script>标签直接添加到index.html中:
<script>
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编译期间而不是在运行时进行了解析。
import
无论如何使其可配置,以便从CDN或本地文件夹加载file.js?如何告诉Angular 2动态加载脚本?
如果使用的是system.js,则可以System.import()在运行时使用:
System.import()
export class MyAppComponent { constructor(){ System.import('path/to/your/module').then(refToLoadedModule => { refToLoadedModule.someFunction(); } ); }
如果您使用的是webpack,则可以通过以下方式充分利用其强大的代码拆分支持require.ensure:
require.ensure
export class MyAppComponent { constructor() { require.ensure(['path/to/your/module'], require => { let yourModule = require('path/to/your/module'); yourModule.someFunction(); }); } }