angular - 轻松部署 Angular2 应用程序，我需要学习 SystemJS 和 Gulp 吗？

Question

我用 Angular2 编写了一个应用程序。在本地使用 lite-server，该应用程序可以完美运行。现在我有一个 Webhost，我可以在其中通过 ftp 传输文件。我天真地尝试将所有文​​件传输到服务器，并更正了一些绝对路径，使我的应用程序可以在服务器上访问。

这行不通。您实际上可以看到它在这里不起作用 mypage .然后，我开始在网上阅读有关此内容的信息，但发现并没有像我希望的那样多。我发现有人说你应该只上传所有 js 文件，一切都应该正常，这对我不起作用，但也许我犯了一些愚蠢的错误。

其他人使用 Gulp、Webpack、SystemJs 来解释流程...但是当他们这样做时，他们会以我不明白的方式解释它，因为我对这些事情一无所知。在我看来，这些流程还关心使应用程序更小、更高效，我根本不关心这些，也许将来我会关心，但现在我只希望它像在本地一样工作。

所以我真正想知道的是，尽管制作一个在本地运行的应用程序非常容易，但如此难以部署是正常的吗，在本地运行和在服务器上运行之间是否有更多区别？我是否需要遵循有关 Gulp、SystemJs 等的教程？是因为 Angular2 现在没有投入生产吗？

如果答案是肯定的，我首先需要哪一个，我该如何开始学习这些东西？

我在这个网站上发现了几个问题，其中最相关的是 How to deploy Angular 2 application developed in Typescript to production?但没有任何答案对我有帮助。

我也尝试了 How to prepare release version with SystemJS and Gulp? 中的第一个答案但是我完全不了解 SystemJs 和 Gulp 妨碍了我。

在另一个问题中，我找到了这个工作示例 example on Github但是我没有机会将我的项目与这个项目进行比较，我不明白示例中应该是什么以及我应该在我的项目中保持什么方式，我所有的尝试都以我的应用程序不再在本地运行而告终或没有改善。

Answer 1

在您的 index.html 中，您有这些行:

<script src="sse/test/bundle.js"></script>
<script>
  System.import('sse/test/bundle.js')
        .then(null, console.error.bind(console));
</script>

您基本上是在加载同一个文件两次。 bundle.js 被打包为系统包，您使用第一个脚本标签正确加载它。加载后，它就可供 SystemJS 使用，您只需从那里调用主模块。

因此，将导入脚本更改为:

<script>
  System.import('main')
        .then(null, console.error.bind(console));
</script>

应用程序应该可以工作...