angular8 Universal （SSR）问题解决

(1) 根据文档提示先进行服务端创建

ng add @nguniversal/express-engine --clientProject 项目名称

(2) 使用Universal在本地系统渲染你的应用

npm run build:ssr && npm run serve:ssr

(3)如果出现以下提示问题，则需要调整e2e->src->app.e2e-spec.ts文件，如下图所示

报错信息：

问题解决：

import { AppPage } from './app.po';
import { browser, logging } from 'protractor';
import {} from 'jasmine';//新引入解决问题

describe('workspace-project App', () => {
  let page: AppPage;

  beforeEach(() => {
    page = new AppPage();
  });

  afterEach(async () => {
    // Assert that there are no errors emitted from the browser
    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
    expect(logs).not.toContain(jasmine.objectContaining({
      level: logging.Level.SEVERE,
    } as logging.Entry));
  });
});

(4) 执行npm run build:ssr成功之后执行npm run serve:ssr，如果出现如下错误，则需修改server.ts

错误描述：

window is not defined 或者 xxxx is not defined，提示什么就按照下面的代码添加什么（可参照sessionStorage等）

比较特殊的是localStorage需要在package.json中引入localstorage-polyfill

解决方案可以参照如下代码：(还需要特别在package.json中引入domino)

import 'zone.js/dist/zone-node';
import 'reflect-metadata';

import { enableProdMode } from '@angular/core';

import * as express from 'express';
import {join} from 'path';

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();
// Express server
const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');

import { readFileSync } from 'fs';
import 'localstorage-polyfill';//localstorage引入

const template = readFileSync(
  join(DIST_FOLDER, 'browser', 'index.html')
).toString();
const domino = require('domino');
Object.assign(global, domino.impl);
const win = domino.createWindow(template);
global['window'] = win;//win错误提示时引入
global['document'] = win.document;
global['sessionStorage'] = win.sessionStorage;
global['localStorage'] = localStorage;
global['XMLHttpRequest'] = win.XMLHttpRequest;

// tslint:disable-next-line: no-unused-expression

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const {AppServerModuleNgFactory, LAZY_MODULE_MAP, ngExpressEngine, provideModuleMap} = require('./dist/server/main');

// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));

// Example Express Rest API endpoints
app.get('/api/*', (req, res) => {
  res.status(404).send('data requests are not supported');
 });
// Serve static files from /browser
app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));

// All regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render('index', { req });
});

// Start up the Node server
app.listen(PORT, () => {
  console.log(`Node Express server listening on http://localhost:${PORT}`);
});