[技術支援-4] Angular Universal

什麼是Angular Universal

下面是一段截錄於https://itw01.com/G3MBE3P.html對Angular Universal目的的說明

雖然Angular是一種構建Web應用的強大方式，但是長期以來，開發人員都知道它在SEO和可訪問性方面的限制。當然，Google的爬蟲能夠執行JavaScript，但是它並不是唯一的爬蟲方案。例如，在將一個連結提交給Slack之後，它的爬蟲會抓取一個預覽，但是並不會執行JavaScript，所以原始的Angular HTML模板將會顯示在預覽之中。爲了消除這種現象所產生的問題，Jeff Whelpley和Patrick Stapleton開發了Angular Universal，它允許在服務端進行渲染。

從上面的文字可以了解，Angular Universal可以在server side預先對網頁模版做處理，變成一個有資料的靜態頁面。可以在使用者要求資料的當下產生靜態頁面，也可以事先產生好靜態檔案以供未來使用。

Angular Universal的主要目的有以下三個

方便網路爬蟲（SEO）
提高在手機裝置和效能較差的設備上的性能表現
快速顯示第一頁

Google，Bing，Facebook，Twitter和其他社交媒體網站都依靠網路爬蟲來為網站編索引，並在搜索內容。Angular Universal可以生成應用程序的靜態版本，無需JavaScript即可輕鬆搜索，鏈接和導航。這也使網站預覽可用，因為每個URL返回一個完全呈現的頁面。

啟用網頁抓取工具通常被稱為搜索引擎優化（SEO）。

安裝Angular Universal所需工具

@angular/platform-server – 通用服務器端組件。
@nguniversal/module-map-ngfactory-loader – 用於在服務器渲染的上下文中處理延遲加載。
@nguniversal/express-engine – 通用應用程序的快速引擎。
ts-loader – 傳輸服務器應用程序

使用下面指令安裝上面四個package

npm install --save @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader @nguniversal/express-engine

1	npm install --save @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader @nguniversal/express-engine

更新 AppModule 模組

修正預設AppModule中BrowserModule的匯入方式

BrowserModule.withServerTransition({ appId: 'tour-of-heroes' }),

1	BrowserModule.withServerTransition({ appId: 'tour-of-heroes' }),

根據使用者的瀏覽器來決定是否使用SSR（server-side rendering）

import { PLATFORM_ID, APP_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

  constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
    @Inject(APP_ID) private appId: string) {
    const platform = isPlatformBrowser(platformId) ?
      'on the server' : 'in the browser';
    console.log(`Running ${platform} with appId=${appId}`);
  }

import { PLATFORM_ID, APP_ID, Inject } from '@angular/core';

import { isPlatformBrowser } from '@angular/common';

constructor(

@Inject(PLATFORM_ID) private platformId: Object,

@Inject(APP_ID) private appId: string) {

const platform = isPlatformBrowser(platformId) ?

'on the server' : 'in the browser';

console.log(`Running ${platform} with appId=${appId}`);

}

撰寫SSR Server的程式碼

src/app/app.server.module.ts

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';

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

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ModuleMapLoaderModule
  ],
  providers: [
    // Add universal-only providers here
  ],
  bootstrap: [ AppComponent ],
})
export class AppServerModule {}

import { NgModule } from '@angular/core';

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

import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';

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

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

@NgModule({

imports: [

AppModule,

ServerModule,

ModuleMapLoaderModule

providers: [

// Add universal-only providers here

bootstrap: [ AppComponent ],

})

export class AppServerModule {}

在這邊使用Express framework來做server，利用Universal的renderModuleFactory功能來輸出靜態檔案

// These are important and needed before anything else
import 'zone.js/dist/zone-node';
import 'reflect-metadata';

import { enableProdMode } from '@angular/core';

import * as express from 'express';
import { join } from 'path';

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express server
const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');

// Express Engine
import { ngExpressEngine } from '@nguniversal/express-engine';
// Import module map for lazy loading
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));

// TODO: implement data requests securely
app.get('/api/*', (req, res) => {
  res.status(404).send('data requests are not supported');
});

// Server static files from /browser
app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));

// All regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req });
});

// Start up the Node server
app.listen(PORT, () => {
  console.log(`Node server listening on http://localhost:${PORT}`);
});

// These are important and needed before anything else

import 'zone.js/dist/zone-node';

import 'reflect-metadata';

import { enableProdMode } from '@angular/core';

import * as express from 'express';

import { join } from 'path';

// Faster server renders w/ Prod mode (dev mode never needed)

enableProdMode();

// Express server

const app = express();

const PORT = process.env.PORT || 4000;

const DIST_FOLDER = join(process.cwd(), 'dist');

// * NOTE :: leave this as require() since this file is built Dynamically from webpack

const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');

// Express Engine

import { ngExpressEngine } from '@nguniversal/express-engine';

// Import module map for lazy loading

import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';

app.engine('html', ngExpressEngine({

bootstrap: AppServerModuleNgFactory,

providers: [

provideModuleMap(LAZY_MODULE_MAP)

]

}));

app.set('view engine', 'html');

app.set('views', join(DIST_FOLDER, 'browser'));

// TODO: implement data requests securely

app.get('/api/*', (req, res) => {

res.status(404).send('data requests are not supported');

});

// Server static files from /browser

app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));

// All regular routes use the Universal engine

app.get('*', (req, res) => {

res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req });

});

// Start up the Node server

app.listen(PORT, () => {

console.log(`Node server listening on http://localhost:${PORT}`);

});

下面是Express的Server檔案內容server.ts

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));
// All regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req });
});
// Server static files from /browser
app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));

app.engine('html', ngExpressEngine({

bootstrap: AppServerModuleNgFactory,

providers: [

provideModuleMap(LAZY_MODULE_MAP)

]

}));

// All regular routes use the Universal engine

app.get('*', (req, res) => {

res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req });

});

// Server static files from /browser

app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));

Universal的設定檔

src/tsconfig.server.json的內容如下：

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

{

"extends": "../tsconfig.json",

"compilerOptions": {

"outDir": "../out-tsc/app",

"baseUrl": "./",

"module": "commonjs",

"types": []

"exclude": [

"test.ts",

"**/*.spec.ts"

"angularCompilerOptions": {

"entryModule": "app/app.server.module#AppServerModule"

}

BUILD出檔案

npm run build:universal

1	npm run build:universal

Claire's Blog

[技術支援-4] Angular Universal

什麼是Angular Universal

安裝Angular Universal所需工具

更新 AppModule 模組

撰寫SSR Server的程式碼

Universal的設定檔

BUILD出檔案

參考資料

發佈留言