问题标签 [angular-universal]

我是 angular 2 的新手，并在 angular 2 中创建了一个简单的页面。

现在我想为我的页面使用服务器端渲染。我阅读了有关角度通用的信息并决定使用它。

但在开始之前很少有疑问。我们是否需要 webpack 来实现它。因为我没有在我的应用程序中使用 webpack（使用基本的快速入门在这里给出https://angular.io/guide/quickstart）

我尝试使用通用但遇到一些错误，所以想确认一下。

请让我知道我是否可以在没有 webpack 的情况下使用 Angular Universal。

关于角度通用的两个问题：

1. 我如何获得角度来缓存服务器端的渲染页面，因为它只需要大约 2 秒才能在客户端进行初始响应，因为 Angular 每次都会在服务器端生成页面。

2. 在前端，角度似乎正在破坏网站，例如 self.context.(funcname) 不存在。我知道的这些问题与调用函数的范围有关，如果我不使用通用（包括预引导），它们确实有效。

有任何想法吗。

所以我首先让我的整个项目在没有 Angular 的通用（服务器端渲染）的情况下工作，然后我开始使用 Angular 通用入门工具包，并将我的项目移动到适当的目录中。

现在一切正常，除了当我导航到某个路线时应该加载和引导的任何延迟加载模块。它可以在不使用 webpack 和通用但不使用的情况下工作。

这是我的主要模块的路线：

有任何想法吗？

我使用 Angular 2 和 ng2-bootstrap 创建并使用 Webpack 和 Universal 提供服务的网站一直在 Chrome 上顺利运行，但在 Safari 或 Microsoft Edge 上无法运行。

目前，Safari 是最重要的。

在开发人员控制台中，我收到以下错误：

这对我没有多大帮助，因为我无法找出它试图分配什么只读属性。

当我了解更多信息时，我将在这里发布我的进展。

更新

我已经更新到最新的 Angular 2 2.1.0 版本，但仍然没有运气。

我还阅读了另一个项目，有人删除了“使用严格”；从项目来看，这至少加载了没有任何错误的页面。但是，当我尝试单击链接时，错误又回来了。

更新

我终于找到了导致错误的实际行：

有没有办法在设置之前确定一个属性是否是只读的？

更新

我想我已经修复了一个错误。结果在模板中的一个组件中，我分配了只读的样式属性。

因此，<div [style]="getStyle()">我没有<div [attr.style]="getStyle()">这样做，而是阻止了 TypeError 的提升。

但是，现在我有另一个错误：

原来它在 Angular 的 common/bundles/common.umd.js 中，但在 Safari 中未定义。有任何想法吗？

在 angular2 通用中......文档是 2 个文件

https://github.com/angular/universal-starter

两者在新的回购中看起来都一样。我假设一个用于服务器端（节点），另一个用于客户端（浏览器）？

因此，当我添加路线、导入等时，我会同时添加两者，因为我不确定该怎么做。如果我必须同时添加两个文件，那么为什么 2 个文件看起来一样？

我什么时候会在分歧的地方添加一个或另一个？何时添加到节点和浏览器应用程序？

谢谢

app.browser.module.ts

app.node.module.ts

我知道 Angular Universal 仍在开发中。所以我考虑过将 Angular Universal 用于一个定期从外部 API 服务器（大约每 10 秒通过 Http 服务提取数据）的网络应用程序。然后，此数据将显示在 Web 应用程序上。

我遇到了几个我还没有找到简单解决方案的问题：

1. Angular Universal 显然需要来自 API 服务器的数据来预渲染页面。每次请求 Web 应用程序 HTML 时，我都不想从 nodeJS 查询 API 服务器。如果 nodeJS 服务器“行为”完全像一个客户端 Web 应用程序实例并且每 10 秒查询一次 API 服务器，每隔 10 秒“缓存”这些数据并使用它来呈现 HTML 就足够了。
2. 客户端 Web 应用程序将来自 API 服务器的数据存储在某个私有成员变量中。这个成员变量然后用于使用 ngFor、绑定等从它构建 HTML。但是这个成员变量在开始时是空的/未定义的。我不希望客户端 Web 应用程序在启动时擦除预渲染的 HTML，因为这会破坏 Angular Universal 的一些想法（不是 SEO，而是减少加载时间）。

我希望你明白我在这里想要达到的目标。您是否知道如何解决这个问题，或者甚至有“官方”的方式来做到这一点？我确信我不是唯一一个尝试做类似事情的人。

我刚开始使用 Angular Universal 并且对“同构”javascript 是全新的。

我对如何拥有一个逻辑路由系统有点困惑，你是不是打算将 Angular Universal 构建为典型的节点休息 api？或者它只是为了立即提供客户端代码，并从外部源/rest api 检索数据？

以角度通用入门套件为例，它从这些路线开始；

那么在此旁边包含一个 node/express/mongo api 来获取/发布数据是否合乎逻辑？IE;

如果是，您会使用散列策略来区分 URL 吗？

与将所有内容托管在一起相比，使用来自外部 api 的通用服务在 angular2 应用程序上提供数据之间是否存在明显的性能差异？

感谢您的任何建议！

我下载了用于 nodejs 的通用启动器，并开始从旧的 angular-rc4 迁移我的网站。但是当我必须实现身份验证时（在我的情况下，它是存储在 localStorage 中的 JWT），服务器没有 localStorage 和 cookie，因此 Angular 仅在客户端上呈现。

我已遵循本指南：https ://github.com/angular/universal-starter/issues/148但它没有用。

下面是我的代码：

身份验证.services.ts

server.authentication.ts

clientAuthentication.services.ts

app.browser.module.ts

app.node.module.ts

那么如何在通过路由器转换导航到客户端上的该页面时与通过浏览器刷新在服务器上导航到相同的页面输出？

提前致谢

我正在探索在 ASP.NET MVC 应用程序中使用 Edge.js 在服务器端呈现 Angular 2 的可能性。

我知道 Angular Universal Starter Kit 包含这个等式的一部分：https ://github.com/alexpods/angular2-universal-starter

但是，它使用的是 Node.js 服务器。我宁愿不在现有的 IIS 服务器之上添加 Node.js 服务器作为额外的 Web 服务器。我的想法是我可以使用 Edge.js 在服务器端执行 Angular 的渲染（即运行必要的 JavaScript 来生成标记）。

我对 Angular 2 非常陌生，因此启动并运行一个示例对我来说并非易事。基于这个已关闭的问题，我想说目前没有努力增加对 Edge.js 的支持（尽管曾经考虑过）：https ://github.com/angular/universal/issues/40

有人知道是否可以使用 ASP.NET MVC 应用程序中的 Edge.js 在服务器端渲染 Angular 吗？

顺便说一句，我被困在 .NET 4.5.2 上（Umbraco 需要它），所以我无法迁移到 .NET Core 并利用它：https ://github.com/MarkPieszak/aspnetcore-angular2-普遍的

像https://github.com/angular/universal-starter.git一样克隆了一个存储库并运行 npm install，它成功下载了依赖项。但是，使用 npm start 启动项目会导致以下错误：

我需要做什么来解决这些错误？