标签: angular-universal

我下载了以下 angular 项目并按照他们的说明进行安装。

https://snipcart.com/blog/angular-seo-universal-server-side-rendering

npm install ... 工作正常。

ng serve .... 工作正常

npm run build:ssr&& npm run serve:ssr... 这给出了一个错误。

（节点：5644）[DEP0005] 弃用警告：由于安全和可用性问题，不推荐使用 Buffer()。请改用 Buffer.alloc()、Buffer.allocUnsafe() 或 Buffer.from() 方法。

我正在使用节点版本 v10.1.0

在本地主机上，虽然有 DeprecationWarning，但它正在运行。但是在显示相同错误后，dist 文件夹中的 server.js 无法运行。

谁能建议我为什么会收到此错误以及解决方案是什么？

我有一个 angular6 通用应用程序，我正在为图像滑块集成ng-simple-slideshow，它构建成功，但是在运行时： npm run serve：SSR 给出以下错误：请提出一些解决方案。谢谢

ReferenceError: window is not defined
at F:\new_trd_back_up\dist\server.js:247023:8032
at vt (F:\new_trd_back_up\dist\server.js:246852:163)
at Object.module.exports (F:\new_trd_back_up\dist\server.js:246852:177)
at __webpack_require__ (F:\new_trd_back_up\dist\server.js:20:30)
at Object.jspdf (F:\new_trd_back_up\dist\server.js:87271:18)
at __webpack_require__ (F:\new_trd_back_up\dist\server.js:59361:30)
at Object../src/app/presentation/presentation.component.ts (F:\new_trd_back_up\dist\server.js:81159:13)
at __webpack_require__ (F:\new_trd_back_up\dist\server.js:59361:30)
at Object../src/app/presentation/presentation.component.ngfactory.js (F:\new_trd_back_up\dist\server.js:81046:11)
at __webpack_require__ (F:\new_trd_back_up\dist\server.js:59361:30)

我已经克隆了这个项目https://github.com/enten/angular-universal 一切正常，我可以在 chrome 上查看源页面但是当我尝试动态更改数据（例如标题）时，当我检查Chrome 中的页面源。为什么？有没有办法改变服务器端的内容？

有关更多信息，我有一个显示评论列表和用于添加评论的输入字段的应用程序。第一次加载页面时，我可以在“页面源”中看到评论列表。但是当我添加评论，并查看页面来源时，内容与初始值相同。下面是一个简单的例子

这是 post.component.html

<p>{{result}}</p>
<button (click)="changeMessage()">Clique moi</button>

和 post.component.ts

import { Component, OnInit, PLATFORM_ID, Inject, NgZone } from '@angular/core';
import { TransferState, makeStateKey } from '@angular/platform-browser';
import { isPlatformServer } from '@angular/common';

const RESULT_KEY = makeStateKey<string>('result');
declare var window: any;

@Component({
    selector: 'app-post',
    templateUrl: './post.component.html',
    styleUrls: ['./post.component.css']
})
export class PostComponent implements OnInit {
    public result;
    private isServer: boolean;
    constructor(
        private tstate: TransferState,
        @Inject(PLATFORM_ID) platformId,
        private _ngZone: NgZone
    ) {
        this.isServer = isPlatformServer(platformId);
    } …

我正准备使用 Angular Universal 为我的 Angular 7 应用程序设置 SSR。我遵循了官方文档（https://angular.io/guide/universal）。我到了需要跑的地方npm run build:ssr && npm run serve:ssr。之后我在终端中看到：Node Express server listening on http://localhost:4000. 终端和浏览器都没有错误。页面一直在加载。

有任何想法吗？

当我尝试在我的项目中使用 Ivy + Angular Universal 时出现错误。

我只有在 Ivy 模式下使用 Angular 时才会出现这个错误（当我在我的设置中设置enableIvy为 false 时，我tsconfig.app.json可以成功构建我的应用程序）。

以下是重现我的问题的步骤：

1. 与 Ivy 的新项目

ng new test-angular --enableIvy

2.添加Angular Universal

ng add @nguniversal/express-engine --clientProject test-angular

3. 当我执行 ng build 时出现错误

ERROR in Node does not exist: "path_to/node_modules/@nguniversal/express-engine"

我的 ng --version 输出是：

Angular CLI: 8.1.0
Node: 10.15.3
OS: win32 x64
Angular: 8.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package                                    Version
--------------------------------------------------------------------
@angular-devkit/architect                  0.801.0
@angular-devkit/build-angular …

可以看到浏览器加载了样式，加载的css中加载了材质类。

跑步水疗 ng serve

运行 Angular 通用

angular.json - Architect.build.options

"styles": [
    "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
    "src/styles.scss",
    "node_modules/ngx-toastr/toastr.css"
],

angular.json - Architect.server

"server": {
    "builder": "@angular-devkit/build-angular:server",
    "options": {
        "outputPath": "dist/server",
        "main": "src/main.server.ts",
        "tsConfig": "src/tsconfig.server.json"
    },
    "configurations": {
        "staging": {
            "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.staging.ts"
                }
            ],
            "optimization": false,
            "outputHashing": "all",
            "sourceMap": true,
            "extractCss": true,
            "namedChunks": false,
            "aot": true,
            "extractLicenses": true,
            "vendorChunk": false,
            "buildOptimizer": true,
            "budgets": [
                {
                    "type": "initial",
                    "maximumWarning": "2mb",
                    "maximumError": "5mb"
                }
            ]
        }
    }
},

服务器.ts

server.tsAngular …

这是我只进行服务器端渲染（不引导客户端）时得到的结果。这意味着无法与所提供的页面进行交互，因为浏览器上不会发生 js 执行。

First Contentful Paint: 0.6 s First Meaningful Paint: 0.6 s Speed Index: 0.6 s First CPU Idle: 1.5 s Time to Interactive: 1.7 s Max Potential First Input Delay:140 ms

总分：99

这是我在使用 Angular 通用和预引导（服务器端渲染 + 客户端渲染）进行渲染时得到的结果。页面是完全互动的。

First Contentful Paint: 0.6 s First Meaningful Paint: 0.6 s Speed Index: 2.5 s First CPU Idle: 2.6 s Time to Interactive: 3.3 s Max Potential First Input Delay:160 ms

总分：75

很明显，当我尝试在客户端执行 javascript 时，Speed Index、First CPU Idle 和 Time to Interactive …

更新到 angular 9 和 Universal 9 后，运行时出错 npm run build:ssr && npm run serve:ssr

Error: Component 'HeaderComponent' is not resolved:
 - templateUrl: ./header.component.html
 - styleUrls: ["./header.component.scss"]
Did you run and wait for 'resolveComponentResources()'?
    at Function.get (D:\projects\my-app\node_modules\@angular\core\bundles\core.umd.js:26828:31)
    at getComponentDef (D:\projects\my-app\node_modules\@angular\core\bundles\core.umd.js:2021:20)
    at verifyDeclarationsHaveDefinitions (D:\projects\my-app\node_modules\@angular\core\bundles\core.umd.js:26519:23)
    at Array.forEach (<anonymous>)
    at verifySemanticsOfNgModuleDef (D:\projects\my-app\node_modules\@angular\core\bundles\core.umd.js:26494:22)
    at D:\projects\my-app\node_modules\@angular\core\bundles\core.umd.js:26491:13
    at Array.forEach (<anonymous>)
    at verifySemanticsOfNgModuleDef (D:\projects\my-app\node_modules\@angular\core\bundles\core.umd.js:26489:64)
    at D:\projects\my-app\node_modules\@angular\core\bundles\core.umd.js:26491:13
    at Array.forEach (<anonymous>)

包.json

"scripts": {
    "ng": "ng",
    "start": "npm-run-all -p client server",
    "client": "ng serve --proxy-config server.conf.json",
    "server": "nodemon --watch server.ts …

我现在处理这个问题已经快两周了。我尝试了很多解决方法，但似乎没有一个有效。我已经安装angular-fire并安装firebase到它的最新版本，尝试过ng add @angular/fire，配置自定义webpack.config.ts，尝试回滚到每个建议的先前版本。没有人解决这个问题。

实际错误：

de-10@de10-LIFEBOOK-A555:~/Desktop$ node dist/server.js 
internal/modules/cjs/loader.js:797
    throw err;
    ^

Error: Cannot find module 'firebase/app'
Require stack:
- /home/de-10/Desktop/dist/server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)
    at Function.Module._load (internal/modules/cjs/loader.js:687:27)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/home/de-10/Desktop/dist/server.js:125276:18)
    at __webpack_require__ (/home/de-10/Desktop/dist/server.js:20:30)
    at Module.<anonymous> (/home/de-10/Desktop/dist/server.js:125199:70)
    at __webpack_require__ (/home/de-10/Desktop/dist/server.js:20:30)
    at Module.<anonymous> (/home/de-10/Desktop/dist/server.js:124984:78)
    at __webpack_require__ (/home/de-10/Desktop/dist/server.js:20:30) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '/home/de-10/Desktop/dist/server.js' ]
}

我不能放弃 Firebase 因为然后我面临：

ERROR in ../node_modules/@angular/fire/auth/auth.d.ts:4:28 - error TS2307: Cannot find module 'firebase/app'.

4 …

我在 SSR 上运行的异步管道有问题。没有错误，只有无限循环（似乎服务器正在等待 observable 被解析）。

我在用：

1. @nestjs/ng-universal
2. 角 9
3. 火力基地
4. 接收器

像这样的简单案例有效：

<p>{{ observable | async }}</p>

但是使用结构指令不起作用：

如果

<p *ngIf="(observable$ | async) > 5">{{ observable$ | async }}</p>

恩福

<p *ngFor="let item of items | async">{{ item }}</p>

使用 async 是一个很好的做法，因为它会避免手动取消订阅以避免组件销毁时内存泄漏。但是，使用手动取消订阅有效。

更新 08/06/2020

当我在http://localhost:4200之后添加 index.html 时，应用程序会加载

异步在模板中是这样的：

<ng-container *ngIf="currentUser$ | async; else loadingUser">

并且 currentUser$ 是在ngOnInit组件的方法中设置的：

  ngOnInit(): void {
    this.currentUser$ = this.authService.currentUser$;
  }

更新 16/06/2020

当我们在组件中删除所有 OnPush 检测策略的使用时，即使在结构指令中使用异步，SSR 模式也能工作。

所以这似乎表明在结构指令中使用带有异步的 OnPush TOGETHER 在 SSR 模式下不起作用。 …