把Angular 2/3/4/5/6项目转换为Angular Universal

Question

我刚刚更新了我的项目以与Angular 5配合使用，并且我在我的托管环境中设置了NodeJS，因此我想创建一个Angular Universal应用程序。我希望将我的当前Angular 5项目转换为可在我的托管环境中设置的工作Angular Universal项目。

到目前为止，我找到的唯一资料是这个：

将Angular 4 Web应用程序转换为Angular Universal应用程序 我按照这个做，但是它给了我错误提示，由于Angular快速变化的性质，我想答案可能已过时，因此我想知道最佳方法来进行转换。

我应该只使用种子模板并耐心地添加所有代码吗？

- Cacoon

---

分享你问题中的错误有用吗？也许它们可以单独解决。 - Richard Matsen

Answer 1

对于我个人而言，最好的方法是将所有组件、服务和模块添加到universal-starter项目中，并确保删除hammerjs或正确导入它（适用于Material 2）。我将大多数组件转换为.module，以便可以使用它们的延迟加载（不要忘记在我的路由文件和静态延迟加载路径中正确添加这些路径）。

整个过程只需要几个小时，其中大部分时间都花在了调试/修复错误上，所以总的来说相当容易。

- Cacoon

Answer 2

我几周前也遇到了同样的问题。有一个维基页面介绍了如何将Universal应用于Angular CLI项目：https://github.com/angular/angular-cli/wiki/stories-universal-rendering。希望这能帮到你。

我发现最简单的方法是使用当前的Angular Universal Starter Kit，并将所有模块导入到新的安装中。由于新的启动器适用于Angular 5 CLI，因此我希望它具有未来的可扩展性。我们将拭目以待...

- Denis

---

哈哈，我自己也采用了完全相同的方法，因为起始套件非常实用并提供了我所需的功能，唯一真正的变化是对jQuery和HammerJS进行了一些检查，以及在HTML中呈现否则隐藏的表单和实现延迟路由。 - Cacoon

Answer 3

我为MEAN应用程序编写了一个带有Angular Universal的入门套件，适用于Angular 5，您可以在GitHub上克隆我的存储库，链接在这里：https://github.com/Stanza987/mean-starter-kit。它提供了所有您需要开始的说明。对于您特定的应用程序，您只需删除MongoDB部分（Mongoose和server.js，node_src/config/database中的内容），并执行npm uninstall mongoose，即可集成您的项目。

- Stan