# 透過 Angular CLI 1.6 將現有專案加入 Angular Universal 伺服器渲染功能

Angular CLI 1.6 的其中一個亮點，就是內建了 Angular Universal 伺服器渲染功能的程式碼產生器，他可以將目前正在開發中的專案直接升級到擁有 SSR (伺服器渲染) 能力。這篇文章就來帶大家了解實作的步驟。

**§ 建立專案**

> ng new demo1  
> cd demo1

**§ 加入 Angular Universal 功能**

> ng g universal universal  
> npm i

你應該看的出來，透過 ng g universal universal 會自動幫你建立所有必要的檔案，還幫你修改所有必需修改的檔案，完全佛心來著！

※ 建議各位還是可以抽空看一下 Angular CLI 幫你修改了哪些內容！

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/76509279bd26214d8e77-image_3092.png)

**§ 修改 package.json 的 "build" 腳本指令**

> "build": "ng build --prod && ng build --prod --app universal --output-hashing=none",

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/4a8555db3006cbcf297f-image_3093.png)

**§ 建置 Angular 與 Angular Universal 應用程式**

> npm run build

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/1412e52cc61e4603cb0d-image_3094.png)

**§ 安裝 Angular 官方提供的 Express 引擎**

> npm i express @nguniversal/express-engine

**§ 建立 server.js 主程式 (Node.js)**

> 'use strict';
> 
> /\* Node 專用的 Zone.js \*/  
> require('zone.js/dist/zone-node');
> 
> const express = require('express');  
> const ngUniversal = require('@nguniversal/express-engine');
> 
> /\* 從這裡載入 SSR 的 bundle 檔 \*/  
> const appServer = require('./dist-server/main.bundle');
> 
> /\* 主要的伺服器渲染函式 \*/  
> function angularRouter(req, res) {
> 
>   /\* Server-side rendering \*/  
>    res.render('index', { req, res });
> 
> }
> 
> const app = express();
> 
> /\* 處理網站根目錄的 HTTP 要求 \*/  
> app.get('/', angularRouter);
> 
> /\* 處理所有靜態檔案 \*/  
> app.use(express.static(\`${\_\_dirname}/dist\`));
> 
> /\* 設定 Angular Express 引擎 \*/  
> app.engine('html', ngUniversal.ngExpressEngine({  
>    bootstrap: appServer.AppServerModuleNgFactory  
> }));  
> app.set('view engine', 'html');  
> app.set('views', 'dist');
> 
> /\* 將所有其他 HTTP 要求都轉給 angularRouter 函式處理 \*/  
> app.get('\*', angularRouter);
> 
> /\* 監聽 Port 3000 \*/  
> app.listen(3000, () => {  
>    console.log(\`Listening on http://localhost:3000\`);  
> });

**§ 啟動與執行 server.js**

> node server.js

此時你只要用瀏覽器開啟 **http://localhost:3000/** 就可以看見 Angular 伺服器渲染的結果！

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/e10260bdd675c723ba0b-image_3095.png)

**相關連結**

-   [Angular server-side rendering in Node with Express Universal Engine](https://medium.com/@cyrilletuzi/angular-server-side-rendering-in-node-with-express-universal-engine-dce21933ddce)
-   [expressjs/express: Fast, unopinionated, minimalist web framework for node.](https://github.com/expressjs/express)
-   [What’s new in Angular CLI 1.6? | Ninja Squad](http://blog.ninja-squad.com/2017/12/12/angular-cli-1.6/)