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

Posted 2023-03-07

【中文标题】将 Angular 2/3/4/5/6 项目转换为 Angular Universal

【英文标题】：Convert Angular 2/3/4/5/6 project to Angular Universal

【发布时间】：2018-04-17 11:13:57

【问题描述】：

我刚刚更新了我的项目以使用 Angular 5，并且我在我的主机上设置了 NodeJS，所以我想创建一个 Angular 通用应用程序，我想将我当前的 Angular 5 项目转换为一个工作 Angular Universal我可以在主机上设置的项目。

到目前为止，我发现的唯一的东西就是这个；

Convert Angular 4 web app to Angular Universal app 我遵循了这个，它给了我错误，我想由于 Angular 的快速变化的性质，答案很可能已经过时了，所以我想知道转换它的最佳方法。

我应该只使用启动种子并完成添加所有代码的繁琐工作吗？

【问题讨论】：

在分享您的问题中的错误有什么好处吗？也许他们可以单独解决。

【参考方案1】：

对我个人来说，最好的方法是将我所有的组件、服务、模块添加到通用启动项目中，确保我删除了hammerjs 或正确导入它（对于材料 2）。我将我的大部分组件都转换为 .module 以便我可以使用它们的延迟加载（不要忘记在我的路由文件和静态延迟加载路径中正确添加这些路径）

只花了几个小时，其中很多只是错误测试/修复，所以总的来说很容易。

【参考方案2】：

几周前我遇到了同样的问题。有一个关于如何在 Angular CLI 项目中实现 Universal 的 Wiki：https://github.com/angular/angular-cli/wiki/stories-universal-rendering 也许这对你有帮助。

我发现使用当前的Angular Universal Starter Kit 并将我的所有模块导入全新安装是最简单的。由于新的启动器适用于 Angular 5 CLI，我希望它是未来的证明。我们会看到……

【讨论】：

哈哈，我自己也采用了完全相同的方法，当初学者工具包非常实用并提供我需要的东西时很容易，唯一真正的变化是对 jquery 和hammerjs 进行一些检查，否则进行一些检查以呈现在 html 中隐藏表单并实现惰性路由

【参考方案3】：

我使用 Angular Universal for Angular 5 为 MEAN 应用程序编写了一个入门工具包，您可以在 GitHub 上克隆我的存储库：https://github.com/Stanza987/mean-starter-kit。它提供了入门所需的所有说明。对于您的特定应用，您只需删除 MongoDB 部分（Mongoose 以及 server.js、node_src/config/database 和 npm uninstall mongoose 之外的部分）并能够将您的项目集成到其中。