标签: angular-universal

我正在使用 @angular v4.0.3 和 webpack 2.2.0。

使用Auler post工作正常，但当我包含 localStorage 时它停止工作。有什么方法可以使它在 angular Universal 中工作或用于 localStorage 的任何模块

我看过很多有关在有角度的通用应用程序中为客户端缓存数据的文章，因此它不会在服务器上已经解决的客户端上重复请求。

我只是不知道如何将数据从服务器传输到客户端。我是否将JSON注入预渲染的HTML或缺少其他内容？

我按照david east 的教程制作了一个有角度的通用应用程序，并将其部署在firebase托管上。我尝试了此方法，它适用于普通路由，但是对于延迟加载的路由却不起作用。这是查看页面源的屏幕截图， 查看页面源

为什么在路由时这不起作用？有人可以告诉我如何配置服务器端渲染以进行延迟加载或共享有关它的任何链接吗？

我想让我的 Angular 应用程序 seo 友好，所以我搜索了谷歌并找到了几个解决方案使你的 Angular 应用程序对 SEO 友好（Angular 4 + Universal）我按照说明进行操作，但是当我使用 npm run start 运行项目时，发生了以下错误：

src/server.ts(5,42): error TS2307: Cannot find module '../dist/ngfactory/src/app/app.server.module.ngf
actory'.

我搜索了一整天寻找解决方案我读了这个问题[AOT] @ngtools/webpack 抛出“找不到模块 './ngfactory/app/app.module.ngfactory'”但是我的问题并没有解决我所有包的问题是最新版本，这是我在 package.json 中的构建命令

"prestart": "ng build --prod && ./node_modules/.bin/ngc",
"start": "ts-node src/server.ts",

这是 server.ts 文件：

import 'reflect-metadata';
import 'zone.js/dist/zone-node';
import { platformServer, renderModuleFactory } from '@angular/platform-server'
import { enableProdMode } from '@angular/core'
import { AppServerModuleNgFactory } from '../dist/ngfactory/src/app/app.server.module.ngfactory'
import * as express from 'express';
import { readFileSync …

Angular5 服务器端渲染（（未知 url）的 Http 失败响应：0 未知错误）。

我相信上述错误与 CORS 有关。但是没有 SSR 的 angular5 CORS 工作正常。

当我将 Api 更改为子域时，会特别发生这种情况

Laravel API：http://api.localhost:80

节点快递：http://localhost:3000

下面是我为 Laravel PHP api 添加的标题。

        header('Access-Control-Allow-Origin: http://localhost:3000');
        header('Access-Control-Allow-Credentials: true');
        header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE');
        header('Access-Control-Allow-Headers: Origin, Content-Type,Accept, X-Auth-Token ,App-Auth,X-XSRF-TOKEN,Authorization');
        header('Access-Control-Max-Age: 86400');

使用 Node 与 Laravel PHP 通信时，出现以下错误

Uncaught (in promise): [object Object]
    at resolvePromise (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:824:31)
    at resolvePromise (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:795:17)
    at D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:873:17
    at ZoneDelegate.invokeTask (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:425:31)
    at Object.onInvokeTask (D:\ng\app-root\node_modules\@angular\core\bundles\core.umd.js:4783:33)
    at ZoneDelegate.invokeTask (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:424:36)
    at Zone.runTask (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:192:47)
    at drainMicroTaskQueue (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:602:35)
    at ZoneTask.invokeTask …

我只是尝试使用 Angular Universal 预渲染一个组件，该组件使用 httpClient 从/static应用程序本身的文件夹中获取数据。

1. 如何在 Angular Universal 中正确使用 httpClient？
2. 是否可以从项目内部访问静态资产并在预渲染时使用 httpClient 获取它们？

我猜该文件不可访问，因为应用程序在预渲染时没有在任何服务器上运行。获取路径是相对的。稍后在远程服务器上获取文件有效，但是在预渲染期间“远程服务器”不可用还是？如何使这工作？

我确实收到了一个错误 [ERROR]，这是由httpClient.get(). 捕获错误错误消息为空。

基本上我有服务

doReqeust() = {
  return this.httpClient.get("./static/get.json")
}

并在组件中

onInit() {
  this.data = this.myService.doRequest();
}

并且视图比它通过异步管道绑定

{{ data.response.title | async }}

静态是项目中的静态文件夹。

我按照以下教程构建了一个简单的Angular 6应用程序并将其集成到Universal中：Angular Universal Tutorial

链接到我创建的GitHub存储库：Angular Universal SSR GitHub Repo

通用SSR运作良好，可以呈现内容（来自Firebase Real Time Database和Firestore的静态和动态），没有任何问题，但是，在我按照PWA教程的官方文档安装PWA之后，通用SSR停止工作且没有任何错误...但是PWA有效。

谁能告诉我为什么安装PWA后SSR停止工作？

提前致谢！

我有一个服务器端呈现的应用程序(有过渡),我有一个404页面,我已经放入一个懒惰的模块(所以我不增加加载的Javascript大小).

这工作正常,但是当客户端接管时有一些闪烁,我认为这是由于主块完成加载后的JS块加载.

鉴于此页面只包含静态链接和一个routerLink,根本不需要客户端,我想知道是否有办法在某些URL上禁用客户端

编辑:正如评论中建议的那样,我试图有条件地引导应用程序.我不能将URL用作条件,因为服务器对不存在的URL响应404(此时没有重定向).因此,最适合使用的是TransferState我在服务器端成功设置的东西,它在结束body标记之前生成一些输出.

不幸的是我没有找到任何方法来正确实例化TransferState,main.ts因为它应该通过导入BrowserTransferStateModule,我看不到在main.ts文件中导入Angular模块的可能方法.

我试图直接用initTransferState函数实例化它,但似乎它不是设计在模块外部使用,因为我收到一个错误:

ERROR in ./src/main.ts
Module not found: Error: Can't resolve '@angular/platform-browser/src/browser/transfer_state' in 'G:\Documents\Projets\Myapp\Sources\master\frontend\src'

除了做一些肮脏的反序列化之外的任何想法？

我正在尝试为我的角度应用程序实现SSR。我遵循了通用入门指南（https://angular.io/guide/universal）。

我的角度应用程序使用了一个rest API，该API需要对所有请求使用access_token（client_credentials grant_type）。我正在使用Cookie将其存储在客户端。

我知道Cookie无法在服务器端从头开始工作。所以我尝试了一些软件包（ngx-cookie-service），但是我找不到一个用于SSR 和 angular 7的软件包...

最近我找到了这个软件包（ngx-auth），但是我不确定我是否可以将其用于此目的...

如果有人成功使用angular 7成功实现了通用Cookie，我在通用网站上找不到任何文档。

非常感谢！

我正在尝试通过此链接https://angular.io/guide/universal使用Angular Universal使用SSR渲染Angular 7应用程序。我以为我可以从那里开始一切工作，因为我能够查看页面源代码并看到呈现给页面的app.component内部的所有内容。但是，我无法在router-outlet标记内渲染任何路线

我只是简单地剥离了我的应用程序，以完全按照文档中的说明进行操作。我在其中读到了一些有关确保ModuleMapLoaderModule在app.server.module内部的内容，以便进行延迟加载。默认情况下，angular-cli命令会附带此命令，因此我不确定发生了什么。

app.server.module

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';

import { AppComponent } from './app.component';
import { AppModule } from './app.module';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ModuleMapLoaderModule,
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

tsconfig.server.json

  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app-server",
  },
  "angularCompilerOptions": {
    "entryModule": "app/app.server.module#AppServerModule"
  }
}

server.ts

import 'zone.js/dist/zone-node';
import { enableProdMode } from '@angular/core';
// Express …