【Angular項目實(shí)戰】Angular5服務(wù)器渲染（SSR）

　　

　　點(diǎn)擊藍字關(guān)注我

　　

　　前言由于業(yè)務(wù)需求，需要對項目中的文檔部分做 SEO 搜索引擎優(yōu)化，這里采用的是 Angular 官方推薦的服務(wù)器渲染方案 Angular Universal。標準的 Angular 應用會(huì )運行在瀏覽器中，它會(huì )在 DOM 中渲染頁(yè)面，以響應用戶(hù)的操作。而 Angular Universal 會(huì )在服務(wù)端通過(guò)一個(gè)名叫服務(wù)端渲染（server-side rendering - SSR）的過(guò)程生成靜態(tài)的應用頁(yè)面。

　　在分享之前，我們先看一下服務(wù)器渲染的工作原理：

　　那么，下面我用一個(gè)簡(jiǎn)單的 demo 來(lái)分享這次實(shí)現過(guò)程以及遇到的問(wèn)題。項目用的是 Angular 5.2.3 版本，本次調試主要涉及修改、添加的文件有如下：

　　*表示修改的文件，+表示添加的文件

　　src/<br /> main.ts *<br /> main.server.ts +<br /> tsconfig.app.json *<br /> tsconfig.server.json +<br />app.module.ts *<br />app.server.module.ts +<br />server.ts +<br />package.json *<br />webpack.config.js +

　　安裝依賴(lài)需要安裝的依賴(lài)如下：

　　@angular/platform-server 編譯客戶(hù)端應用，并在服務(wù)器上運行其生成的 Universal 應用<br />@nguniversal/module-map-ngfactory-loader 處理服務(wù)端渲染環(huán)境下的惰性加載<br />@nguniversal/express-engine 渲染引擎<br />ts-loader 解析typescript，供Webpack構建時(shí)使用

　　安裝命令

　　npm install -S @angular/platform-server@^5 express <br />npm install -D ts-loader@^3 webpack-node-externals npm-run-all<br />npm install

　　注意：@angular/platform-server的版本號最好根據當前 Angular 版本進(jìn)行安裝，避免與其它依賴(lài)有版本沖突。

　　修改應用文件?修改文件 src/app/app.module.ts

　　import { BrowserModule } from '@angular/platform-browser';<br />import { NgModule } from '@angular/core';<br /><br />import { AppComponent } from './app.component';<br /><br />@NgModule({<br /> declarations: [<br /> AppComponent<br /> ],<br /> imports: [<br /> BrowserModule.withServerTransition({ appId: 'ssr-test-app' })<br /> ],<br /> providers: [],<br /> bootstrap: [AppComponent]<br />})<br />export classAppModule { }

　　該模塊將由瀏覽器使用，并將在客戶(hù)端啟動(dòng)應用程序。BrowserModule.withServerTransition({ appId: 'ssr-test-app' }) 導入BrowserModule，告訴 Angular 這是服務(wù)器端呈現的應用程序。appId 文件是應用的名稱(chēng)，它是唯一的。

　　?新建文件 src/app/app.server.module.ts

　　import { NgModule } from '@angular/core';<br />import { ServerModule } from '@angular/platform-server';<br /><br />import { AppModule } from './app.module';<br />import { AppComponent } from './app.component';<br /><br />@NgModule({<br /> imports: [<br /> AppModule,<br /> ServerModule<br /> ],<br /> bootstrap: [AppComponent],<br />})<br />export classAppServerModule { }

　　該模塊是服務(wù)端應用模塊，它包裝了應用的根模塊 AppModule，以便 Universal 可以在你的應用和服務(wù)器之間進(jìn)行協(xié)調。AppServerModule 還會(huì )告訴 Angular 在應用以 Universal 方式運行時(shí)，該如何啟動(dòng)它。

　　?新建 src/main.server.ts 導出服務(wù)器模塊

　　export { AppServerModule } from './app/app.server.module';

　　main.server.ts 文件是服務(wù)器端的入口文件，類(lèi)似于瀏覽器端的入口文件main.ts。稍后會(huì )在 angular-cli.json 中引入到它，以便設置一個(gè)服務(wù)器端的入口配置。

　　?修改 angular-cli.json 配置，添加 server 部分配置

　　{<br /> "$schema": "./node_modules/@angular/cli/lib/config/schema.json",<br /> "project": {<br /> "name": "ssr-test-app"<br /> },<br /> "apps": [{<br /> "root": "src",<br /> "outDir": "dist/browser",<br /> "assets": ["assets", "favicon.ico"],<br /> "index": "index.html",<br /> "main": "main.ts",<br /> "polyfills": "polyfills.ts",<br /> "test": "test.ts",<br /> "tsconfig": "tsconfig.app.json",<br /> "testTsconfig": "tsconfig.spec.json",<br /> "prefix": "app",<br /> "styles": [<br /> "styles.css",<br /> "assets/js/swiper/css/swiper.css"<br /> ],<br /> "scripts": [<br /> "assets/js/jquery/dist/jquery.min.js",<br /> "assets/js/jquery-cookie/jquery-cookie.js",<br /> "assets/js/swiper/js/swiper.min.js"<br /> ],<br /> "environmentSource": "environments/environment.ts",<br /> "environments": {<br /> "dev": "environments/environment.ts",<br /> "prod": "environments/environment.prod.ts"<br /> }<br /> },<br /> {<br /> "platform": "server",<br /> "root": "src",<br /> "outDir": "dist/server",<br /> "assets": [],<br /> "index": "index.html",<br /> "main": "main.server.ts",<br /> "test": "test.ts",<br /> "tsconfig": "tsconfig.server.json",<br /> "testTsconfig": "tsconfig.spec.json",<br /> "prefix": "app",<br /> "scripts": [],<br /> "environmentSource": "environments/environment.ts",<br /> "environments": {<br /> "dev": "environments/environment.ts",<br /> "prod": "environments/environment.prod.ts"<br /> }<br /> }<br /> ],<br /> "e2e": {<br /> "protractor": {<br /> "config": "./protractor.conf.js"<br /> }<br /> },<br /> "lint": [{<br /> "project": "src/tsconfig.app.json",<br /> "exclude": "**/node_modules/**"<br /> },<br /> {<br /> "project": "src/tsconfig.spec.json",<br /> "exclude": "**/node_modules/**"<br /> },<br /> {<br /> "project": "e2e/tsconfig.e2e.json",<br /> "exclude": "**/node_modules/**"<br /> }<br /> ],<br /> "test": {<br /> "karma": {<br /> "config": "./karma.conf.js"<br /> }<br /> },<br /> "defaults": {<br /> "styleExt": "scss",<br /> "component": {}<br /> }<br />}

　　?修改文件: src/tsconfig.app.json

　　{<br /> "extends": "../tsconfig.json",<br /> "compilerOptions": {<br /> "outDir": "../out-tsc/app",<br /> "baseUrl": "./",<br /> "module": "es2015",<br /> "types": []<br /> },<br /> "exclude": [<br /> "test.ts",<br /> "**/*.spec.ts",<br /> "server.ts"<br /> ]<br />}

　　?新建 src/tsconfig.server.json，把 tsconfig.app.json 復制到 tsconfig.server.json 中，并做如下修改：在 “compilerOptions”中，把 “module” 改為 “commonjs”（因為 node 中運行的是common 格式模塊）。添加一個(gè)“angularCompilerOptions” 屬性，并把 “entryModule”（入口模塊）指向你的 AppServerModule 實(shí)例，格式為 importPath#symbolName。在這個(gè)例子中，這個(gè)入口模塊是 app/app.server.module#AppServerModule

　　{<br /> "extends": "../tsconfig.json",<br /> "compilerOptions": {<br /> "outDir": "../out-tsc/app",<br /> "baseUrl": "./",<br /> "module": "commonjs",<br /> "types": []<br /> },<br /> "exclude": [<br /> "test.ts",<br /> "**/*.spec.ts",<br /> "server.ts"<br /> ],<br /> "angularCompilerOptions": {<br /> "entryModule": "app/app.server.module#AppServerModule"<br /> }<br />}

　　?建立 nodejs 服務(wù)器，采用 express, 創(chuàng )建文件: src/server.ts

　　import 'reflect-metadata';<br />import 'zone.js/dist/zone-node';<br />import { renderModuleFactory } from '@angular/platform-server'<br />import { enableProdMode } from '@angular/core'<br />import * as express from 'express';<br />import { join } from 'path';<br />import { readFileSync } from 'fs';<br /><br />enableProdMode();<br /><br />const PORT = process.env.PORT || 4200;<br />const DIST_FOLDER = join(process.cwd(), 'dist');<br /><br />const app = express();<br /><br />const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();<br />const { AppServerModuleNgFactory } = require('main.server');<br /><br />app.engine('html', (_, options, callback) => {<br /> const opts = { document: template, url: options.req.url };<br /><br /> renderModuleFactory(AppServerModuleNgFactory, opts)<br />.then(html => callback(null, html));<br />});<br /><br />app.set('view engine', 'html');<br />app.set('views', 'src')<br /><br />app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));<br /><br />app.get('*', (req, res) => {<br /> res.render('index', { req });<br />});<br /><br />app.listen(PORT, () => {<br /> console.log(`listening on http://localhost:${PORT}!`);<br />});

　　?我們需要一個(gè) webpack 配置文件，來(lái)打包 server.ts 文件：webpack.config.js

　　const path = require('path');<br />var nodeExternals = require('webpack-node-externals');<br /><br />module.exports = {<br /> entry: {<br />server: './src/server.ts'<br /> },<br /> resolve: {<br />extensions: ['.ts', '.js'],<br />alias: {<br /> 'main.server': path.join(__dirname, 'dist', 'server', 'main.bundle.js')<br />}<br /> },<br /> target: 'node',<br /> externals: [nodeExternals()],<br /> output: {<br />path: path.join(__dirname, 'dist'),<br />filename: '[name].js'<br /> },<br /> module: {<br />rules: [<br /> { test: /\.ts$/, loader: 'ts-loader' }<br />]<br /> }<br />}

　　● 將 build 和 serve 命令添加到 package.json 中的 scripts 部分，方便打包：

　　"scripts": {<br /> "ng": "ng",<br /> "start": "run-p build:dev nodemon",<br /> "build": "run-s build:client build:aot build:server",<br /> "build:client": "ng build --prod --app 0",<br /> "build:aot": "ng build --aot --app 1",<br /> "build:server": "webpack -p",<br /> "build:dev": "run-p build:dev:client build:dev:aot build:dev:server",<br /> "build:dev:client": "ng build -w --aot --app 0",<br /> "build:dev:aot": "ng build -w --aot --delete-output-path=false --app 1",<br /> "build:dev:server": "webpack -w",<br /> "nodemon": "sleep 25 && nodemon --watch dist/browser/index.html --watch dist/server.js dist/server.js",<br /> "test": "ng test",<br /> "lint": "ng lint",<br /> "e2e": "ng e2e"<br />}

　　打包運行執行命令進(jìn)行打包：

　　npm run build

　　打包結果如下：

　　

　　生成的包：

　　

　　node 運行剛剛打包好的文件：

　　node dist/server.js

　　

　　打開(kāi):4200/會(huì )正常顯示項目主頁(yè)面：

　　

　　右鍵“查看源代碼”：

　　

　　存在問(wèn)題1、使用瀏覽器 API

　　相信會(huì )有同學(xué)在打包的時(shí)候出現過(guò)下面的報錯問(wèn)題

　　ReferenceError: window is not defined

　　或者

　　ReferenceError: document is not defined

　　因為這些是瀏覽器獨有的原生對象（比如 window、document、navigator 或 location），在服務(wù)器上面是沒(méi)有的，因此運行的時(shí)候會(huì )報錯。因此，我們需要對使用瀏覽器的 API 方法做好兼容。

　　方案1：在server.ts，引入domino做兼容

　　const domino = require('domino');<br />const win = domino.createWindow(template);<br /><br />global['window'] = win;<br />global['document'] = win.document;<br />global['DOMTokenList'] = win.DOMTokenList;<br />global['Node'] = win.Node;<br />global['Text'] = win.Text;<br />global['HTMLElement'] = win.HTMLElement;<br />global['navigator'] = win.navigator;

　　但是，domino 并非兼容了所有瀏覽器的 api，只是兼容了大部分方法。有興趣的同學(xué)可以看，domin的源碼()如果用到的 api 不多，可以考慮用這個(gè)方案。

　　方案2：使用 Angular 官方推薦的方法通過(guò) PLATFORM_ID 令牌注入的對象來(lái)檢查當前平臺是瀏覽器還是服務(wù)器，從而解決該問(wèn)題。判斷是瀏覽器環(huán)境，才執行使用到瀏覽器方法的代碼片段。不過(guò)個(gè)人覺(jué)得有些麻煩，因為在用到瀏覽器獨有 API 方法的地方都得做引入判斷兼容。

　　import { PLATFORM_ID } from '@angular/core';<br />import { isPlatformBrowser, isPlatformServer } from '@angular/common';<br /><br />constructor(@Inject(PLATFORM_ID) private platformId: Object) { ... }<br /><br />ngOnInit() {<br /> if (isPlatformBrowser(this.platformId)) {<br /> // 瀏覽器代碼<br /> // eg:let url=window.location.href;<br /> ...<br /> }<br /> if (isPlatformServer(this.platformId)) {<br /> // 服務(wù)器代碼<br />...<br /> }<br />}

　　2、使用第三方庫，例如jq

　　ReferenceError: $ is not defined

　　方案1：使用 Angular 官方推薦的方法和上面一樣，檢查當前平臺是瀏覽器還是服務(wù)器，執行相應的代碼。

　　import { PLATFORM_ID } from '@angular/core';<br />import { isPlatformBrowser, isPlatformServer } from '@angular/common';<br /><br />constructor(@Inject(PLATFORM_ID) private platformId: Object) { ... }<br /><br />ngOnInit() {<br /> if (isPlatformBrowser(this.platformId)) {<br /> // 瀏覽器代碼<br /> // eg:let userID =$.cookie('userID');<br /> ...<br /> }<br />}

　　總結至此一個(gè)簡(jiǎn)單的 universal 服務(wù)就調整完成了，一般簡(jiǎn)單的 demo 按照官網(wǎng)給的提示操作基本能順利的搭建起來(lái)。但實(shí)際上，如果是在我們復雜業(yè)務(wù)的項目當中使用時(shí)，會(huì )遇到各種問(wèn)題，比如：瀏覽器API的兼容，第三方庫的兼容等等。面對這些問(wèn)題，需要我們保持耐心逐個(gè)問(wèn)題一一去解決。

　　下期給大家分享更多實(shí)戰中的點(diǎn)滴，如果大家喜歡 Angular 或對此感興趣，歡迎各位關(guān)注、留言，大家的支持就是我的動(dòng)力！