angualr 6+ 服务端渲染 SSR 问题记录

为什么要使用服务器端渲染？

创建应用的SSR版本有三个主要原因。

1. 促进网络爬虫（SEO）
2. 提高移动和低功耗设备的性能
3. 配合Angular 模块懒加载 快速显示首屏

详细教程参考官网，我做的时候也是基本上跟着官网一步一步走。

问题一：window，document，navigator，或location等浏览器对象报错：如

ReferenceError: window is not defined

项目在服务器端渲染（这里用的是express），在node环境下是没有以上对象的。解决方案有几种：
1、在server.ts中添加

import { join } from 'path';
const domino = require('domino');
const fs = require('fs');
const DIST_FOLDER = join(process.cwd(), 'dist');
//我的项目代码 在运行npm run build:ssr 后生生成在 dist/browser 目录下，请根据实际路径修改
const template = fs.readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();
const win = domino.createWindow(template);
// global 对象中添加 对应window的对象
global['window'] = win;
global['document'] = win.document;
global['navigator'] = win.navigator;
global['history'] = win.history;

2、利用angular module懒加载，首屏加载的时候不要写浏览器对象相关的逻辑

3、在生命周期函数ngAfterViewInit(): void 中写调用浏览器对象的逻辑,ReferenceError: localStorage is not defined 如localStorage等无法被domino创建的window模拟的。

4、通过判断代码运行平台写不同逻辑

import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
 
constructor(@Inject(PLATFORM_ID) private platformId: Object) { ... }
 
ngOnInit() {
  if (isPlatformBrowser(this.platformId)) {
     // Client only code.
     ...
  }
  if (isPlatformServer(this.platformId)) {
    // Server only code.
    ...
  }
}

问题二：SSR时候需要使用绝对路径发送请求，这时可以使用express的反向代理中间件， api请求设置：

import * as proxyMiddleWare from 'http-proxy-middleware';
import * as express from 'express';
const proxyPath = "http://0.0.0.0:80";//目标后端服务地址
const proxyOption ={target:proxyPath,changeOrigoin:true};
// Express server
const app = express();

// use the proxy middleware
app.use("/api",proxyMiddleWare(proxyOption));

问题三，SSR国际化配置 和客户端使用有一点不同，这里用的是ngx-translate库。项目多语言切换的时候会出现页面已经返回，但是语言包还没返回的情况。在页面初次加载时，模板资源的请求要先于语言包文件的请求，所以在页面在客户端渲染时，语言包资源实际还没就绪，因此在那一瞬间填写在模板中的语言包键名便直接被渲染在了页面中。

既然Angular的服务端渲染本身无法实现首次刷新无毛刺的效果，那么我们稍微变换一下思路，能否将语言包资源与模板同时返回给客户端呢？答案是肯定的。通过Angular提供的状态转移功能，我们可以在服务端获取语言包，并将其与模板一同返回给客户端，如此客户端在渲染模板时便能直接获取到键值对应的文本，从而避免键值直接渲染在页面中的问题。

解决这个问题的核心技术就是Angular的TransferState，除此之外我们还需要结合ngx-translate的自定义loader功能。

我们这里为服务端新建一个loader:

//translate-server-loader.service.ts
import { Observable } from "rxjs";
import { TranslateLoader } from '@ngx-translate/core';

declare var require: any;
declare var process: any;

import { makeStateKey, StateKey, TransferState } from '@angular/platform-browser';

const path = require('path');
const fs = require('fs');

export class TranslateServerLoader implements TranslateLoader {

  constructor(
    private prefix: string = 'i18n',
    private suffix: string = '.json',
    private transferState: TransferState) {
  }

  public getTranslation(lang: string): Observable<any> {

    return Observable.create(observer => {
      const assets_folder = path.join(process.cwd(), 'dist', 'checkout-on-board', this.prefix);
      const jsonData = JSON.parse(fs.readFileSync(`${assets_folder}/${lang}${this.suffix}`, 'utf8'));
      // Here we save the translations in the transfer-state
      const key: StateKey<number> = makeStateKey<number>('transfer-translate-' + lang);
      this.transferState.set(key, jsonData);
      observer.next(jsonData);
      observer.complete();
    });
  }
}

修改服务端 app.server.module.ts

import { TranslateServerLoader } from './translate-server-loader.service'
import { TransferState } from '@angular/platform-browser';

export function translateFactory(transferState: TransferState) {
  return new TranslateServerLoader('/assets/i18n', '.json', transferState);
}

@NgModule({
  imports: [
...
   TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: translateFactory,
        deps: [TransferState]
      }
    })
...
],
  providers:[
    TransferState
  ],
})

参考：
小谈Angular SSR项目的国际化
ngx-translate/core issue #754 中的@peterpeterparker 与 @ocombe，@ocombe指出了问题的根本原因，@peterpeterparker则贴出了完整的代码示例。