在浏览器中加载没有systemjs动态加载器的angular2应用程序答案

【问题标题】：Loading angular2 application without systemjs dynamic loader in browser在浏览器中加载没有systemjs动态加载器的angular2应用程序
【发布时间】：2016-10-04 18:19:44
【问题描述】：

有没有一种方法可以在浏览器中没有 systemjs 动态加载器的情况下加载和引导 angular2 应用程序？我的意思是我想加载所有带有<script> 标签或jquery $.loadScript() 的js 文件，然后想在加载所有脚本时引导angular2 应用程序。

我正在开发一个将注入另一个应用程序的应用程序，我必须在浏览器中一次加载我所有的 js、html、css。由于服务器安全，不会有动态加载选项。所以我不能使用 systemjs 动态加载，我必须一次加载所有 html、css、js，一旦加载，我需要在浏览器中引导 angular2 应用程序。

我浏览了所有其他链接，它们都提供了如何处理 systemjs 动态加载，但我需要其他方式。

【问题讨论】：

你看过WebPack吗？
不，据我了解，webpack 用于打字稿构建，并且在将打字稿编译为 js 文件时需要它。但是我需要停止在加载js文件的浏览器中动态加载，然后将angular2引导到浏览器中。 webpack 是在浏览器中这样做的吗？
没有。 SystemJS 和 Webpack 应该是互斥的。两者都不能用于编译 TypeScript。 Webpack 是 SystemJS 的替代品。有了它，你应该能够将你的模块连接成一个 JS 对象文件。
知道了，我试试看。
查看 Angular-CLI 并进行测试。它为 Webpack 提供了一个配置，如果它看起来可以满足您的需求，请迁移到 CLI 或迁移到 Webpack。

标签： angular systemjs

【解决方案1】：

最后，angular-cli 选项对我有用。在 beta-10 之后，他们删除了 systemjs 动态加载器，并为库（所有依赖项，如 angular、rxjs 等）创建了一个 js 文件，并为所有项目代码创建了一个 js 文件。所以生产版本将只在您的 index.html 文件中包含 2 个 js 文件链接。脚本没有动态加载和休息调用我的服务器。

我已经创建了 2 yo 生成器来搭建应用程序，一个带有 systemjs 动态加载，另一个没有 systemjs 加载，以防万一有相同问题的人可以参考。

没有 systemjs (angular-cli)：

npm install -g yo
npm install -g generator-angular2-without-systemjs
yo generator-angular2-without-systemjs

使用systemjs动态加载：

npm install -g yo
npm install -g generator-angular2-with-systemjs
yo generator-angular2-with-systemjs

Babel 的问题::

Babel 不支持 typescript，要使用 babel，我必须将我所有的 typescript 代码移动到 js 中，语法也略有不同。我不习惯远离打字稿

【讨论】：