Angular2，将组件连接成一个包，SystemJS 失败

Question

我有一个 gulp 任务，重点是真正将多个 Angular2 组件捆绑在一起，它失败并显示以下错误消息：

Error: Multiple anonymous System.register calls in module http://site/bundles/Pages/file.min.js. If loading a bundle, ensure all the System.register calls are named.

这是真的，System.register 调用没有命名，但这是 TypeScript 编译器生成的。我在网上找不到任何资源来解释如何改变这种行为，所以我认为这是不可能的？

这就是我尝试导入 file.min.js:

的方式

<script type="text/javascript">System.import('bundles/Pages/file.min.js').then(null, console.error.bind(console));</script>

这就是 file.min.js 的内容：

(function(System, SystemJS) {System.register([],function(e,t){"use strict";t&&t.id;return{setters:[],execute:function(){}}});
...
System.register([],function(e,t){"use strict";t&&t.id;return{setters:[],execute:function(){}}});
System.register([],function(e,t){"use strict";t&&t.id;return{setters:[],execute:function(){}}});
System.register([],function(e,t){"use strict";t&&t.id;return{setters:[],execute:function(){}}});
System.register([],function(t,e){"use strict";var n;e&&e.id;return{setters:[],execute:function(){n=function(){function t(){}return t}(),t("MyService",n)}}});
...
})(System, System);

我可能完全不明白应该如何使用 SystemJS

进行捆绑

Answer 1

这是由匿名 System.register 电话引起的。如果您打算捆绑，则应命名所有调用：

System.register([],...); //no bundle, should be downloaded as file
System.register('myModule', [], ...); //this is how it should be for bundling

显然，如果未指定编译器选项 --outFile，TypeScript 将生成匿名注册。另一种方法是在 .ts 文件的顶部添加 /// <amd-module name="my module name" />，这将解决捆绑问题。此外，如果您使用的是路由器，您可能需要防止标识符损坏，因为它给我带来了很多问题，显然会破坏 angular router.js

Angular2，将组件连接成一个包，SystemJS 失败

Angular2, concatenate components into a single bundle and SystemJS fails

typescript

systemjs

angular