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

The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

透過 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 幫你修改了哪些內容!

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

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

§ 建置 Angular 與 Angular Universal 應用程式

npm run build

§ 安裝 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 伺服器渲染的結果!

 

相關連結