Angular CLI 1.3.0 和 Angular 4.3 版本之前，要使用 SSR (Server Side Rendering) 其實還蠻複雜的，並不是無法做到，只是很麻煩。可是，當版本升級到 Angular 4.3 及 CLI 1.3.0 以後，這一切都變得非常簡單。這裡先說明如何快速地將 SSR 的環境建置起來

前置作業

先將 CLI 的版本升級到 1.3.0。可以從這看到目前的釋出版本 CLI Release (2017/08/08 時，CLI版本是 1.3.0-rc.5)

npm install @angular/[email protected]
安裝 @angular/platform-server

npm install @angular/platform-server

設定步驟

.angular-cli.json

多新增一個 app 設定

{
      "name": "universal",
      "platform": "server",
      "root": "src",
      "outDir": "dist-server",
      "main": "main-server.ts",
      "tsconfig": "tsconfig.server.json",
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
}

刪除 polyfiils，伺服器不需要這個
移除 assets、styles、scripts ，這部分已經在 browser 版本中處理過了。

main-server.ts

在 scr 資料夾下新增 main-server.ts 檔案

import {enableProdMode} from '@angular/core';
export {AppServerModule} from './app/app-server.module';

enableProdMode();

app-server.module

在 src/app 資料夾下，新增 `app-server.module.ts’ 檔案

import {NgModule} from '@angular/core';
import {ServerModule} from '@angular/platform-server';

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

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

app.module

修改 app.module.ts 檔案，給予 withServerTransition 的設定值，appId 可以任取。

...
imports: [
  BrowserModule.withServerTransition({appId: 'universal'}), 
  ...
],
...

tsconfig.server.json

在 src 資料夾下，新增 tsconfig.server.json

{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "outDir": "../out-tsc/server",
    /* For now, Node only understand CommonJS modules, so you can't stick to es2015 here */
    "module": "commonjs"
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
  /* Additional informations to bootstrap Angular */
  "angularCompilerOptions": {
    "entryModule": "app/app-server.module#AppServerModule"
  }
}

package.json

修改 scripts 指令

「build」: 「ng build --prod && ng build --prod --app universal --output-hashing=none」

這樣子當執行 npm run build 時，就會分別建置瀏覽器端及伺服器端所需要的程式了

設定 node express server

在專案跟目錄下新增 server.js 檔案，這檔案的功能是執行一個 node express 網站伺服器

套件安裝

npm install express @nguniversal/express-engine

server.js

'use strict';

/* Server specific version of Zone.js */
require('zone.js/dist/zone-node');

const express = require('express');
const ngUniversal = require('@nguniversal/express-engine');

/* The server bundle is loaded here, it's why you don't want a changing hash in
 * it */
const appServer = require('./dist-server/main.bundle');

/* Server-side rendering */
function angularRouter(req, res) {
  /* Server-side rendering */
  res.render('index', {req, res});
}

const app = express();

/* Root route before static files, or it will serve a static index.html, without
 * pre-rendering */
app.get('/', angularRouter);

/* Serve the static files generated by the CLI (index.html, CSS? JS, assets...)
 */
app.use(express.static(`${__dirname}/dist`));

/* Configure Angular Express engine */
app.engine('html', ngUniversal.ngExpressEngine({
  bootstrap: appServer.AppServerModuleNgFactory
}));
app.set('view engine', 'html');
app.set('views', 'dist');

/* Direct all routes to index.html, where Angular will take care of routing */
app.get('*', angularRouter);

app.listen(3000, () => {
  console.log(`Listening on http://localhost:3000`);
});

執行方式

node server.js

執行上述指令後，就會將一個網站伺服器跑起來，而開啟 http://localhost:3000 的網站，即可看到由伺服器產生的 Angular 網站

參考資料

Angular server-side rendering in Node with Express Universal Engine

CK's Notepad

[Angular] Angular Server-Side Rendering with Angular CLI 1.3.x 基本設定