标签: angular-universal

我有一个 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);
    } …

我们正在建立一个使用 Ionic 4 + Angular 7 的测试应用程序，使用 Angular Universal for SSR。将 Ionic 添加到组合中后，我们在尝试为应用程序提供服务时收到以下错误。直觉是它与SSR有关，但由于文档有限且难以找到示例项目，我们一直无法解开这个谜。

/Users/jsmith/Documents/workspace/website2.0/node_modules/@ionic/angular/dist/fesm5.js:1
(function (exports, require, module, __filename, __dirname) { import { __extends, __awaiter, __generator, __assign } from 'tslib';
                                                                     ^

SyntaxError: Unexpected token {
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)

我正准备使用 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 …

这是 cmd npm run serve 上的错误：ssr

 I'm getting the error 'Can't find module 'require("./server/main") while hit the command "npm run server:ssr".
    but "npm run build:ssr" execute successfully.
    Please Help anyone.

    PS C:\Users\DELL\ion\portfolio\portfolio> npm run serve:ssr

    > portfolio@0.0.0 serve:ssr C:\Users\DELL\ion\portfolio\portfolio
    > node dist/server

    internal/modules/cjs/loader.js:628
        throw err;
        ^

    Error: Cannot find module 'require("./server/main")'
    Require stack:
    - C:\Users\DELL\ion\portfolio\portfolio\dist\server.js
        at Function.Module._resolveFilename (internal/modules/cjs/loader.js:625:15)
        at Function.Module._load (internal/modules/cjs/loader.js:527:27)
        at Module.require (internal/modules/cjs/loader.js:683:19)
        at require (internal/modules/cjs/helpers.js:16:16)
        at webpackUniversalModuleDefinition 
        (C:\Users\DELL\ion\portfolio\portfolio\dist\server.js:3:28)
        at Object.<anonymous> 
        (C:\Users\DELL\ion\portfolio\portfolio\dist\server.js:10:3)
        at Module._compile (internal/modules/cjs/loader.js:776:30)
        at Object.Module._extensions..js 
       (internal/modules/cjs/loader.js:787:10)
        at …

可以看到浏览器加载了样式，加载的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 …

当渲染角度通用时，断点命中来得太晚了。我正在使用 mat-sidenav，它希望根据断点将抽屉设置为打开或不打开。渲染ssr的时候好像没有断点信息。

例如，这在构造函数中：

this.isHandset$ = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
        map(result => result.matches)
    );

在视图中：

<mat-sidenav-container class="sidenav-container" fullscreen>
<mat-sidenav class="sidenav" 
    [opened]="(isHandset$ | async) === false">  <!-- close if handset -->
... etc

在应用程序水合之后（在完整的角度项目加载之后）抽屉根据视口大小打开/关闭，但最初不是。

如何使断点也适用于通用？

我目前正在使用 angular 9 rc，但在 8 中存在同样的问题。

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