我要import
angular,实例化AngularJS模块,然后导入另一个需要已实例化Angular的文件:
import angular from 'angular';
var app = angular.module('app', []);
import 'src/app.js';
angular.element(window).ready(function(){
angular.bootstrap(document, ['app']);
});
但是Babel将其编译成此内容(TLDR:将所有进口商品都提升到顶部)
System.register([], function (_export2) {
return {
setters: [],
execute: function () {
System.register(['angular', 'src/app.js'], function (_export) {
var angular, app;
return {
setters: [function (_angular) {
angular = _angular.default;
}, function (_srcAppJs) {}],
execute: function () {
app = angular.module('app', []);
angular.element(window).ready(function () {
angular.bootstrap(document, ['app']);
});
}
};
});
}
};
});
更新:@ just-boris
我非常了解
System.import().then
。问题在于app.js也是构成Angular组件的import
文件,这些文件要求实例化module
。导入文件示例:
angular.module('app').controller( [ function () {} ] );
System.import().then
不等到依赖项树解决了,因为它没有任何意义。
System.import('app').then(function(){
// But wait, app.js's dependencies aren't resolved!
// The Angular components aren't loaded yet!
// The following will throw errors:
angular.element(window).ready(function(){
angular.bootstrap(document, ['app']);
});
});
最佳答案
根据设计,所有import语句应可用于静态分析,因此它们必须位于顶层。有关相关问题,请参见this answer。
如果要在运行时加载模块,则不应使用import
。但是您可以使用System.import
代替
System.import('src/app.js').then(function() {
// deal with app.js
});