ng add @spartacus/schematics --ssr

在用 SAP Spartacus 開發(fā)的 store 里，能看到 devDependencies 里具有 @spartacus/schematics 的依賴：

這是 SAP Spartacus Schematics 的一部分：https://sap.github.io/spartacus-docs/schematics.

Spartacus schematics allow you to install Spartacus libraries in your project.

Spartacus Schematics 允許我們?cè)谧约旱捻?xiàng)目里安裝 Spartacus 庫。SAP Spartacus Schematics 本身的幫助文檔：https://github.com/SAP/spartacus/blob/develop/projects/schematics/README.md

命令：ng add @spartacus/schematics@latest

支持的一些重要 option：

• featureLevel sets the application feature level. The default value is the same as the version of the Spartacus packages you are working with. For example, the featureLevel for @spartacus/schematics@3.2.0 is 3.2.

featureLevel：設(shè)置應(yīng)用的 feature level，默認(rèn)值和 Spartacus package level 一致。

• ssr includes the server-side rendering (SSR) configuration.

做兩件事情：

Adds server-side rendering dependencies.

Provides additional files that are required for SSR.

使用 option 的語法：

ng add @spartacus/schematics@latest --baseUrl https://spartacus-demo.eastus.cloudapp.azure.com:8443/ --baseSite=apparel-uk-spa,electronics-spa --currency=gbp,usd --language=uk,en --ssr

手動(dòng)添加 SSR support 步驟

package.json 里添加依賴：

• “@angular/platform-server”: “~10.1.0”,
• “@nguniversal/express-engine”: “^10.1.0”

https://github.com/angular/universal/tree/master/modules/express-engine

Express Engine 的作用是為了在服務(wù)器端運(yùn)行 Angular 應(yīng)用讓其支持服務(wù)器端渲染。

• “@spartacus/setup”: “^3.0.0-rc.2”,

• “express”: “^4.15.2”

添加下列 devDependencies 到 package.json 里：

• “ts-loader”: “^6.0.4”,
• “@nguniversal/builders”: “^10.1.0”,
• “@types/express”: “^4.17.0”,

添加下列腳本到 package.json：

• “e2e”: “ng e2e”,
• “dev:ssr”: “ng run :serve-ssr” - 注意，不是 npm run，后者定義在 package.json 里。

而這個(gè) serve-ssr 定義在 angular.json 的 architect 區(qū)域里：

• “serve:ssr”: “node dist//server/main.js”,
• “build:ssr”: “ng build --prod && ng run :server:production”,
• “prerender”: “ng run :prerender”

修改 src/main.ts:

之前的代碼：

platformBrowserDynamic().bootstrapModule(AppModule);

修改之后的代碼：

document.addEventListener("DOMContentLoaded", () => {platformBrowserDynamic().bootstrapModule(AppModule);});

這里的 platformBrowserDynamic 是什么意思？參考這篇知乎文章什么是 Angular Platforms - 深入理解 Angular Platforms

Angular 框架的設(shè)計(jì)初衷是將其打造成一個(gè)獨(dú)立平臺(tái)。這樣的設(shè)計(jì)思路確保了 Angular 應(yīng)用可以正常地跨環(huán)境執(zhí)行 - 無論是在瀏覽器，服務(wù)端，web-worker 甚至是在移動(dòng)設(shè)備上。

當(dāng)我們通過 Angular CLI 指令 ng new MyNewApplication 創(chuàng)建一個(gè)新的 Angular 應(yīng)用時(shí)，應(yīng)用的默認(rèn)環(huán)境設(shè)置為瀏覽器環(huán)境。

platformBrowserDynamic 函數(shù)的返回結(jié)果是一個(gè) PlatformRef。 PlatformRef 只是一個(gè) Angular 服務(wù)，該服務(wù)知曉如何引導(dǎo)啟動(dòng) Angular 應(yīng)用。

Angular 高度依賴于依賴注入系統(tǒng)。這也是為什么 Angular 本身很大一部分內(nèi)容被聲明為抽象服務(wù)的原因, 比如 Renderer2.

下圖中間藍(lán)色圓圈代表抽象類，上下的綠色和紫色，分別代表 Browser Platform 和 Server Platform 的具體實(shí)現(xiàn)。

DomAdapter：

• BrowserDomAdapter - 瀏覽器平臺(tái)
• DominoAdapter - 服務(wù)器端平臺(tái)，不與 DOM 進(jìn)行交互，因?yàn)樵诜?wù)端無法獲取 DOM.除此之外，其還會(huì)使用 domino library，在 node.js 環(huán)境中模擬 DOM.

app.module.ts:

BrowserModule.withServerTransition({ appId: 'spartacus-app' }),

Configures a browser-based app to transition from a server-rendered app, if one is present on the page.

@param params — An object containing an identifier for the app to transition. The ID must match between the client and server versions of the app.

BrowserTransferStateModule: NgModule to install on the client side while using the TransferState to transfer state from server to client.

https://angular.io/api/platform-browser/BrowserTransferStateModule

TransferState: A key value store that is transferred from the application on the server side to the application on the client side.

一個(gè) key value 存儲(chǔ)結(jié)構(gòu)，從服務(wù)器端應(yīng)用轉(zhuǎn)移到客戶端應(yīng)用。

TransferState will be available as an injectable token. To use it import ServerTransferStateModule on the server and BrowserTransferStateModule on the client.

關(guān)閉 PWA

As soon as Spartacus is installed in PWA mode, a service worker is installed, and it serves a cached version of index.html, along with the js files. This results in SSR being completely skipped.

Spartacus 如果以 PWA 模式安裝，則 service worker 啟動(dòng)，提供一個(gè)緩存后的 index.html, 以及相關(guān)的 JavaScript 文件。這會(huì)導(dǎo)致 SSR 完全被忽略掉。

在代碼里關(guān)閉 PWA：

StorefrontModule.withConfig({backend: {occ: {baseUrl: 'https://[your_enpdoint],},},pwa: {enabled: false,},};

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的手动为 SAP Spartacus 添加 SSR 支持的步骤的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。