使用 ng new jerryssr 創(chuàng)建一個(gè)空的 Angular 項(xiàng)目：

確保項(xiàng)目創(chuàng)建成功。

ng add @spartacus/schematics@latest --baseUrl https://spartacus-demo.eastus.cloudapp.azure.com:8443/ --baseSite=electronics-spa --ssr

彈出提示信息：Please choose which configuration you would like to add. (Use arrow keys)

默認(rèn)是 b2c, 維護(hù)在 schema.json 的 configuration 的 enum 節(jié)點(diǎn)里：

Which Spartacus features would you like to setup?

然后選擇要安裝的 feature：

自動(dòng)添加的內(nèi)容：https://github.com/wangzixi-diablo/ssrdemo/commit/076f582ad691a5b65b3276abd8122751a900237f

• angular.json:

多了 “src/styles/spartacus/user.scss”：

多了 tsconfig.server.json:

增加了和 server 相關(guān)的 architect 設(shè)置：

• package.json：增加了新的 scripts：
  

devDependencies 里，增加了對(duì) schematics 的引用：

• app.module.ts:

• spartacus.module.ts: 包含了 SpartacusFeatureModule 和 SpartacusConfigurationModule：

啟動(dòng)命令：npm run build:ssr && npm run serve:ssr

ng build --prod 相當(dāng)于 ng build --configuration=production

ng build --prod 最終使用的是 configurations 里 product 節(jié)點(diǎn)下指定的 environment.prod.ts 文件：

environment.prod.ts 的內(nèi)容：production: true

build 之后的輸出文件夾：

build 的結(jié)果：輸出文件夾在 dist/jerryssr/browser 里：

npm run build:ssr 命令的另一半：ng run jerryssr:server:production

ng 命令執(zhí)行的是 angular.json 文件里定義的 project architect：

這次的輸出是 dist/jerryssr/server:

server 文件夾里生成的資源：

最后，執(zhí)行的是 main.js：

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

總結(jié)

以上是生活随笔為你收集整理的手动安装 SAP Spartacus 3.3.0版本并启用服务器端渲染 SSR的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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