问题标签 [angular-universal]

我试图通过预渲染 angular2 来了解性能和服务器负载，我测试了小型应用程序。

我对具有预渲染大型应用程序或在线商店经验的人有疑问？预渲染是否有效？

古代网站：

• 用户通过 bar 或 href 导航到 url，对该特定页面进行服务器调用
• 返回页面（静态 html 或 ASP.NET MVC 在服务器上呈现的 html 等）
• 每个页面都会重新加载所有内容，速度慢，有理由去 SPA

角 2 SPA：

• 用户通过栏或路由器导航到 url
• 对组件的 html/javascript 进行服务器调用
• 仅加载路由器插座内的东西，而不是导航栏等（SPA 的主要优势）
• 但是，html 实际上并没有按原样从服务器接收，Angular 2 代码/标记是 - 然后这个标记在客户端上处理，然后它可以显示为浏览器可以理解的纯 HTML - 慢？进入 Angular 通用？

角通用：

首次使用您的应用程序的用户将立即看到服务器渲染的视图，这极大地提高了感知性能和整体用户体验。

所以，简而言之：

• 用户通过搜索栏或路由器导航到 url
• Angular Universal 实际上并没有返回 Angular 组件，而是将这些组件转换为 html，然后将它们发送给客户端。这是唯一的优势。

TLDR：

1. 我对 Angular Universal 所做的理解是否正确？（上面的最后一个要点）。
2. 最重要的是，假设我了解它的作用，它是如何实现这一目标的？我的理解是 IIS 或其他仅返回请求的资源，那么 Angular Universal 如何对它们进行预处理（编辑：我基本上会运行类似于返回已处理 html 的 API 的东西）？
3. 这意味着服务器进行了显示初始视图所需的所有初始 API 调用，例如从路由解析...对吗？

编辑：让我们专注于这种方法来缩小问题范围：

第二种方法是针对每个请求在 Web 服务器上动态重新呈现您的应用程序。这种方法仍然有几个缓存选项可用于提高可伸缩性和性能，但您将在 Angular Universal 的上下文中为每个请求运行应用程序代码。

这里的方法：

第一个选项是预渲染您的应用程序，这意味着您将使用其中一个通用构建工具（即 gulp、grunt、broccoli、webpack 等）在构建时为您的所有路由生成静态 HTML。然后，您可以将该静态 HTML 部署到 CDN。

超出了我的范围。看到那里有一堆动态内容，但我们预加载了静态 html。

我只是在测试 Angular Universal 如何处理第三方 JavaScript 和 CSS 库的导入。为了便于使用，我尝试使用 jQuery 和 Bootstrap。

我正在使用 Universal Starter repo https://github.com/angular/universal-starter并通过 npm 安装 jQuery 和 Bootstrap。

在我的中app.component.ts，我像这样包含了 jQuery，它运行良好。

虽然当我想导入一个 css 文件时它不能正常工作。我将它导入到我的app/client.ts文件中，如下所示。

实际的 Bootstrap css 在我的 Webpack 包中，但我的 HTML 没有任何样式。有人遇到过类似的问题并且知道如何解决这个问题吗？

我使用 Angular Universal Starter 工具包实现了我的 Web 应用程序。我想将预渲染文件上传到 S3 存储桶，以便我的初始页面加载更快。但是我找不到关于将预渲染文件上传到 S3 以及如何在初始加载时访问该文件的正确配置？

我想在我的项目中集成 angular2-jwt：https ://github.com/auth0/angular2-jwt

当我尝试调用函数 tokenNotExpired 时，我得到了这个异常：

异常：调用节点模块失败并出现错误：ReferenceError：localStorage 未在 Object.tokenNotExpired 中定义

这是我的代码：

auth.service.ts

app.component.ts

app.component.html

谢谢

是否有任何带有 WebSockets 的 Angular Universal 示例？

在我的情况下，服务器端渲染不知道 WebSocket 对象。如果我使用 socket.io，节点服务器在尝试建立连接时会挂起。

有关该问题的一些附加信息：

我从 github 下载了 angular-universal-starter：https ://github.com/angular/universal-starter 运行“npm install”和“npm start”开箱即用

但是在我将以下代码添加到 AppComponent 之后

我的 NodeJs 服务器控制台出现以下错误：

我在一个使用 Angular2 + Angular-Universal + Angular-Material 的网站上工作。

我已经使用了通用启动器来开始我的项目。我已经添加了 Angular-Material 并且这个工作正常。现在我需要使用 Flex-Layout，所以我把这个依赖放在了 node.module.ts 和 browser.module.ts 中。当我尝试启动服务器时，出现此错误：

C:\Users\ivan\Documents\Workspace\Proyectos\cityrep\cityss-front\dist\server\index.js:41207 var paramTypes = ctorParameters.map(function (ctorParam) { return ctorParam && ctorParam.type; });

TypeError: ctorParameters.map is not a function at ReflectionCapabilities.parameters (C:\Users\ivan\Documents\Workspace\Proyectos\cityrep\cityss-front\dist\server\index.js:41207:45) 在 Reflector.parameters ( C:\Users\ivan\Documents\Workspace\Proyectos\cityrep\cityss-front\dist\server\index.js:41341:44) 在 CompileMetadataResolver.getDependenciesMetadata (C:\Users\ivan\Documents\Workspace\Proyectos\cityrep \cityss-front\dist\server\index.js:22579:54) 在 CompileMetadataResolver.getTypeMetadata (C:\Users\ivan\Documents\Workspace\Proyectos\cityrep\cityss-front\dist\server\index.js:22544 :26) 在 C:\Users\ivan\Documents\Workspace\Proyectos\cityrep\cityss-front\dist\server\index.js:22687:41 at Array.forEach (native) at CompileMetadataResolver.getProvidersMetadata (C:\Users\ivan\Documents\Workspace\Proyectos\cityrep\cityss-front\dist\server\index.js:22667:19）在 C:\Users\ivan\Documents\Workspace\Proyectos\cityrep\cityss-front\dist \server\index.js:22365:71 at Array.forEach (native) at CompileMetadataResolver.getNgModuleMetadata (C:\Users\ivan\Documents\Workspace\Proyectos\cityrep\cityss-front\dist\server\index.js:22356 :44)

有人知道会发生什么吗？

谢谢！
伊万

1. 按照https://github.com/AngularClass/angular2-webpack-starter#quick-start中的说明安装 angular2-webpack-starter

2. 按照https://universal.angular.io/quickstart/的说明 执行npm install body-parser angular2-universal preboot express --save

输出：

谁能解释最后一行的含义，它的影响以及如何解决问题？

Angular-Meteor允许 Meteor.JS 应用程序与 AngularJS 集成。 Angular-Universal允许 AngularJS 2 代码在 Node.JS 中的服务器上运行，允许服务器端渲染和使用 Angular 的依赖注入框架。

是否可以在 Angular-Meteor 应用程序中使用 AngularJS 2 依赖注入框架来允许在整个堆栈中使用相同的模式并促进代码重用？如果是这样，怎么做？有种子申请吗？

我正在使用 Angular 2 Universal：

我有一个服务：

单元测试：

我的应用模块：

当我运行单元测试时，我得到：错误：没有 Http 提供者！ UniversalModule如注释中所示，在 app.module 中应该 http已经导入模块。

我正在使用最新的 Angular 通用。

我应该http在测试中添加吗？