Angular Universal(統一平台)筆記

angular官網高級文檔AngularUniversal部分的翻譯總結，這東西在angular4開始正式被官方支持了，目前其實支持的服務器端還沒有很多，但好歹包括了node和DotNetCore，算是個進一步優化應用以及擴展需求(強化服務端能力)的方案。

正文開始：

------------------- 手動分割線 ---------------------

注意： 本文屬於實驗性質，可能會更改。

Angular 統一平台

目錄

• 概述
  • 如何工作
  • 為何這么做
    • SEO / 無JavaScript
    • 啟動性能
  • 例子
• 准備
  • 安裝工具
  • 相對組件的URL
  • 服務端轉換
• AOT配置
  • 主入口
  • 創建teconfig-aot.json
  • webpack配置
    • 加載器
    • 插件
    • 輸入
    • 輸出
• AOT構建
  • 源映射
  • AOT服務端
• 統一平台配置
  • 服務端代碼
    • 應用服務器模塊
    • Universal引擎
    • Web服務器
  • 創建tsconfig-uni.json
  • 創建webpack.config.uni.js
    • 入口
    • 輸出文件
• Universal的構建與服務
  • 運行
    • 禁用客戶端App
    • 節流
• 總結

一、概述

Angular統一平台（Universal）是一項讓angular應用運行在瀏覽器之外的技術。使用Universal你可以運行你的angular應用在一個基於node的服務器中，你可以用它來按需生成html輸出或預先生成html文件。

如何工作

angular統一平台通過編譯app來讓其能運行在服務器端，也可以是預先在服務器端編譯好（AOT編譯）。這跟傳統的AOT不同因為應用是使用platform-server來編譯而不是platform-browser。這一更改會讓app有能力在服務端先渲染好HTML字符串而不是在瀏覽器端操作DOM。
這樣的app有一些限制。比如，它不能處理瀏覽器事件（比如鼠標或鍵盤輸入，也不能發送ajax請求）。

 

一個已存在的叫做Preboof的工具可以記錄瀏覽器事件以便能在整個angular應用加載完成時執行它們

本文中我們將使用webpack來創建一個AOT編譯的app，然后將創建一個Universal服務器來構建這個app。

為何這么做

有兩個主要的原因：

SEO / 無JavaScript

你的高度互動的angular應用可能不會很容易被搜索引擎找到，你可以生成一個靜態版本的app。這會讓你的app更容易被搜索到，鏈接到以及導航到。同時能讓搜索引擎或社交媒體可以提供網站預覽快照這些能力。

啟動性能

應用的啟動時間對留住用戶來說很重要。盡管AOT編譯能加快應用的啟動時間，這還不是足夠的，尤其是第網速下的手機設備。有53%的手機端訪問會被放棄如果頁面花費了超過三秒的時間來加載。你的應用必須加載快一點來留住用戶防止他們想做點別的。
使用angular Universal的話，你可以先生成一個基本界面就像是完整的應用。這個界面是個純html界面，即使JS被禁用了也可以顯示。這個界面不會處理瀏覽器事件，但是他們支持使用routeLink進行導航。
推薦的方案是先服務一個用來着陸的靜態版本的界面，你的angular應用就在它的后面，兩者看起來十分接近，並且在應用完整加載時就能提供完整的交互體驗。這肯定比讓用戶一直看着一個loading字樣要好很多。

高網速下啟動比較

低網速下啟動比較

示例

AOT與Universal版本的app都通過AOT編譯器來編譯。區別是AOT版本將編譯好的打包文件發送到客戶端，而Universal版本則是編譯到一個服務端頁面，渲染成實際界面后才發送到瀏覽器。
AOT 版本的項目需要創建如下文件：

• index-aot.html文件
• 主入口文件 main-aot.ts
• TS的配置文件 tsconfig-aot.json
• webpack配置文件 webpack.config.aot.js
• 輕量級的服務端配置文件 bs-config.aot.js
  Universal版本的應用需要創建如下文件：
• 服務端app模塊 app.server.ts
• Universal渲染器 universal-engine.ts
• 一個node的expressweb服務器來處理請求 server-aot.ts
• TS配置文件 teconfig-uni.json
• webpack配置文件 webpack.config.uni.js

目錄結構就像這樣：

目錄結構

二、准備

安裝工具

需要安裝以下依賴：

• npm install @angular/compiler-cli @angular/platform-server --save-dev
• npm install webpack @ngtools/webpack raw-loader express --save-dev

組件相對路徑

AOT下的組件路徑

服務端轉換

AppModule的更改

三、AOT配置

普通的AOT加Webpack配置略過

四、AOT構建

即 npm run build:aot
將生成一個輸出文件.js以及一個.js.map映射文件。

五、AOT服務端

即寫一個輕量服務器來監聽請求：

bs-config.aot.js

可以使用 npm run serve:aot 來運行。

六、Universal配置

現在你可以使用相似的方式來搭建Universal應用。

服務端代碼

包括：

1. app server模塊

app.server.ts

2. Universal引擎

universal-engine.ts

3. web服務器

server-aot.ts(1)

server-aot.ts(2)

差不多就是在express服務器上引導angular模塊並渲染到index-aot.html，將頁面返回給瀏覽器呈現。

七、構建與服務

即使用npm run build:uni這些指令來構建，以及使用npm指令運行express服務器監聽端口。

八、總結

angular Universal可以極大的加快應用的啟動速度與優化體驗。網絡越慢能得到的好處越大（首次加載）。