ng add @spartacus/schematics --ssrhtml
在用 SAP Spartacus 开发的 store 里,能看到 devDependencies 里具备 @spartacus/schematics 的依赖:node
这是 SAP Spartacus Schematics 的一部分:https://sap.github.io/spartac...git
Spartacus schematics allow you to install Spartacus libraries in your project.
Spartacus Schematics 容许咱们在本身的项目里安装 Spartacus 库。SAP Spartacus Schematics 自己的帮助文档:https://github.com/SAP/sparta...github
命令:ng add @spartacus/schematics@latestweb
支持的一些重要 option:typescript
featureLevel:设置应用的 feature level,默认值和 Spartacus package level 一致。express
作两件事情:npm
使用 option 的语法:json
ng add @spartacus/schematics@latest --baseUrl https://spartacus-demo.eastus... --baseSite=apparel-uk-spa,electronics-spa --currency=gbp,usd --language=uk,en --ssrbootstrap
https://github.com/angular/un...
Express Engine 的做用是为了在服务器端运行 Angular 应用让其支持服务器端渲染。
而这个 serve-ssr 定义在 angular.json 的 architect 区域里:
修改 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:
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的原创文章,尽在:"汪子熙":