安装 SAP Spartacus 3.0 并使用B2B功能

简介: 安装文档:https://sap.github.io/spartacus-docs/building-the-spartacus-storefront-from-libraries/首先ng new spa3 --style=scss, 新建一个空的Angular应用:

image.png

image.png

然后命令行: ng add @spartacus/schematics

image.png

  • To verify what versions of Spartacus libraries were installed, open the file package.json and look for @spartacus.

image.png

image.png

再执行命令:

ng add @spartacus/organization

如果遇到下列错误消息:

schematics_2.readPackageJson is not a function

image.png

执行ng version检查Angular CLI版本,看是否和Spartacus文档要求的一致:

image.png

官方文档要求Angular CLI 版本号为10.1或更高,但不能高于11:

image.png

首先把我本机的Angular CLI卸载:

npm uninstall -g @angular/cli

image.png

执行npm cache verify, 再重新安装:

image.png

npm install -g @angular/cli@latest, 安装的是最新的11.2.4版本:

image.png

安装指定的10.1 版本:

npm install -g @angular/cli@10.1image.png

成功安装:

image.png

安装完毕后,ng serve启动即可。

image.png

如果想使用B2B功能,记住编辑文件app.module.ts, 将powertools-spa添加到context节点的baseSite数组里。image.png

完整的app.module.ts源代码如下,供参考:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { translations, translationChunksConfig } from '@spartacus/assets';
import { B2bStorefrontModule, defaultB2bOccConfig } from '@spartacus/setup';
import { provideDefaultConfig } from '@spartacus/core';
import { AdministrationRootModule } from '@spartacus/organization/administration/root';
import { provideConfig } from '@spartacus/core';
import { organizationTranslations } from '@spartacus/organization/administration/assets';
import { organizationTranslationChunksConfig } from '@spartacus/organization/administration/assets';
import { OrderApprovalRootModule } from '@spartacus/organization/order-approval/root';
import { orderApprovalTranslations } from '@spartacus/organization/order-approval/assets';
import { orderApprovalTranslationChunksConfig } from '@spartacus/organization/order-approval/assets';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    B2bStorefrontModule.withConfig({
      featureModules: {
        organizationOrderApproval: {
        module: () => import('@spartacus/organization/order-approval').then(
          (m) => m.OrderApprovalModule
        ),
        },
        organizationAdministration: {
          module: () => import('@spartacus/organization/administration').then(
          (m) => m.AdministrationModule
        ),
        },
      },
      backend: {
        occ: {
          baseUrl: 'https://spartacus.eastus.cloudapp.azure.com:9002',
          prefix: '/occ/v2/'
        }
      },
      context: {
        currency: ['USD'],
        language: ['en'],
        baseSite: ['electronics-spa','powertools-spa'],
        urlParameters: ['baseSite', 'language', 'currency']
      },
      i18n: {
        resources: translations,
        chunks: translationChunksConfig,
        fallbackLang: 'en'
      },
      features: {
        level: '3.1'
      }
    }),
    AdministrationRootModule,
    OrderApprovalRootModule
  ],
  providers: [provideDefaultConfig(defaultB2bOccConfig),
    provideConfig({
      i18n: {
        resources: organizationTranslations,
        chunks: organizationTranslationChunksConfig,
      },
    }),
    provideConfig({
      i18n: {
        resources: orderApprovalTranslations,
        chunks: orderApprovalTranslationChunksConfig,
      },
    })],
  bootstrap: [AppComponent]
})
export class AppModule { }
相关文章
|
6月前
|
存储 BI
SAP CDS view 里的 currency_conversion 功能介绍
SAP CDS view 里的 currency_conversion 功能介绍
193 0
|
2月前
|
IDE JavaScript 开发工具
什么是 SAP Fiori tools 的 environment check 功能
什么是 SAP Fiori tools 的 environment check 功能
26 0
|
1月前
|
监控
SAP CRM 解决方案功能的全面性
SAP CRM 解决方案功能的全面性
18 0
|
6月前
|
数据库 容器
SAP EWM 模块中的 pick 和 Pack 功能
SAP EWM 模块中的 pick 和 Pack 功能
73 0
|
3月前
|
JSON 开发者 数据格式
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
24 0
|
3月前
|
搜索推荐 开发者 UED
关于 SAP Spartacus 层的 UI 设计
关于 SAP Spartacus 层的 UI 设计
38 0
|
3月前
|
开发者 UED
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
23 0
|
6月前
|
监控 前端开发 JavaScript
什么是 Spartacus Storefront B2B store 的 My Company 菜单
什么是 Spartacus Storefront B2B store 的 My Company 菜单
38 0
|
6月前
|
存储 数据可视化 定位技术
关于 SAP Fiori Tools Application Modeler Page Map 功能的 app.json
关于 SAP Fiori Tools Application Modeler Page Map 功能的 app.json
31 0
|
6月前
|
前端开发 搜索推荐 JavaScript
什么是 SAP Spartacus 的 CMS Page Connector
什么是 SAP Spartacus 的 CMS Page Connector
46 0