关于sap:手动为-SAP-Spartacus-添加-SSR-即服务器端渲染的步骤

4次阅读

共计 3484 个字符，预计需要花费 9 分钟才能阅读完成。

ng add @spartacus/schematics –ssr

在用 SAP Spartacus 开发的 store 里，能看到 devDependencies 里具备 @spartacus/schematics 的依赖：

这是 SAP Spartacus Schematics 的一部分：https://sap.github.io/spartac…

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

Spartacus Schematics 容许咱们在本人的我的项目里装置 Spartacus 库。SAP Spartacus Schematics 自身的帮忙文档：https://github.com/SAP/sparta…

命令：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：设置利用的 feature level，默认值和 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… –baseSite=apparel-uk-spa,electronics-spa –currency=gbp,usd –language=uk,en –ssr

package.json 里增加依赖：

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

https://github.com/angular/un…

Express Engine 的作用是为了在服务器端运行 Angular 利用让其反对服务器端渲染。

“@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 <your-project-name>:serve-ssr” – 留神，不是 npm run，后者定义在 package.json 里。

而这个 serve-ssr 定义在 angular.json 的 architect 区域里：

“serve:ssr”: “node dist/<your-project-name>/server/main.js”,
“build:ssr”: “ng build –prod && ng run <your-project-name>:server:production”,
“prerender”: “ng run <your-project-name>:prerender”

批改 src/main.ts:

之前的代码：

 platformBrowserDynamic().bootstrapModule(AppModule);

批改之后的代码：

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

这里的 platformBrowserDynamic 是什么意思？参考这篇知乎文章什么是 Angular Platforms – 深刻了解 Angular Platforms

Angular 框架的设计初衷是将其打造成一个独立平台。这样的设计思路确保了 Angular 利用能够失常地跨环境执行 – 无论是在浏览器，服务端，web-worker 甚至是在挪动设施上。

当咱们通过 Angular CLI 指令 ng new MyNewApplication 创立一个新的 Angular 利用时，利用的默认环境设置为浏览器环境。

platformBrowserDynamic 函数的返回后果是一个 PlatformRef。PlatformRef 只是一个 Angular 服务，该服务通晓如何疏导启动 Angular 利用。

Angular 高度依赖于依赖注入零碎。这也是为什么 Angular 自身很大一部分内容被申明为形象服务的起因, 比方 Renderer2.

下图两头蓝色圆圈代表抽象类，高低的绿色和紫色，别离代表 Browser Platform 和 Server Platform 的具体实现。

DomAdapter：

BrowserDomAdapter – 浏览器平台
DominoAdapter – 服务器端平台，不与 DOM 进行交互，因为在服务端无奈获取 DOM. 除此之外，其还会应用 domino library，在 node.js 环境中模仿 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/platfo…

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

一个 key value 存储构造，从服务器端利用转移到客户端利用。

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

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 启动，提供一个缓存后的 index.html, 以及相干的 JavaScript 文件。这会导致 SSR 齐全被疏忽掉。

在代码里敞开 PWA：

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

更多 Jerry 的原创文章，尽在：” 汪子熙 ”:

正文完