将 Angular 前端与 Bloomreach/hippo CMS 解耦

Question

背景

在我们当前的实现中，我们正在将 angular 应用程序部署到bloomreach（集成在您的前端中的一个cms）内的webfiles中...... Bloomreach 在Java 8 上运行（我对Java 的经验很少）。 由于许多原因，这不是主意。 我们还实现了一个不太理想的第 3 方连接器调用 edit-connect。 Bloomreach 现在有自己的 SDK 用于 angular。 见这里https://github.com/bloomreach/experience-ng-sdk

我们的目标是升级最新的bloomreach版本并升级angular。 当前的策略只是在我们升级 angular 并实施他们的 ng-sdk 时将Bloomreach保持在版本 12，这在我们实施 sdk 之前无法完成，然后最终我们想要过渡到他们的 SAAS Z20F35E630DAF494DBFA4CZ3F6。 我已经创建了一个新的 angular 应用程序并安装了 ng-sdk 但我遇到了 cors 我确定在哪里可以更改它甚至指向正确的 Z572D4E421E5E6B9BC11Z815E8A027112

文档有些不清楚，尤其是关于其 cms 的旧版本。

有没有人有做类似事情的经验？ 有可能还是我们首先需要升级bloomreach，然后再做其他事情？

Important details Bloomreach is a Java 8 Angular version 14 SPA documentation https://github.com/bloomreach/spa-sdk ng-sdk documenation https://github.com/bloomreach/spa-sdk/blob/main/packages/ng -sdk/README.md Angular 示例： https://github.com/bloomreach/spa-sdk/tree/main/examples/angular （紧随其后的是减去 ZD18B8624A0F5F7221DA7B8

这是代码

app.router
const routes: Routes = [
  { path: '**', component: BloomreachComponent }
]

/app.module

@NgModule({
  declarations: [
    AppComponent,
    BloomreachComponent,
    HeaderComponent,
  ],
  entryComponents: [],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrSdkModule
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}
/bloomreach.component
import { Component, OnInit } from '@angular/core';
import { Configuration } from '@bloomreach/spa-sdk'
import { ComponentMap } from './bloomreach.mapping'
import { NavigationEnd, Router } from '@angular/router'
import { filter, Observable } from 'rxjs'
import { Component, OnInit } from '@angular/core';
import { Configuration } from '@bloomreach/spa-sdk'
import { ComponentMap } from './bloomreach.mapping'
import { NavigationEnd, Router } from '@angular/router'
import { filter, Observable } from 'rxjs'

@Component({
  selector: 'paige-bloomreach',
  templateUrl: './bloomreach.component.html',
})
export class BloomreachComponent implements OnInit {
  public configuration: Partial<Configuration> = {
    endpoint: 'http://localhost:8080/site/resourceapi',
    debug: true,
  }

  public mapping = ComponentMap
  private navigationEnd: Observable<NavigationEnd>

  constructor(private router: Router) {
    this.configuration.path = router.url

    this.navigationEnd = router.events.pipe(
      filter((event) => event instanceof NavigationEnd)
    ) as Observable<NavigationEnd>
  }


  ngOnInit(): void {
    this.navigationEnd.subscribe((event: NavigationEnd) => this.configuration.path = event.url)
  }

}

import { Type } from '@angular/core'
import { HeaderComponent } from './header/header.component'
import { BrProps } from '@bloomreach/ng-sdk'

export const ComponentMap: Record<keyof any, Type<BrProps>> = {
  'app-header': HeaderComponent
}

/bloomreach.mapping.ts
import { Type } from '@angular/core'
import { HeaderComponent } from './header/header.component'
import { BrProps } from '@bloomreach/ng-sdk'

export const ComponentMap: Record<keyof any, Type<BrProps>> = {
  'app-header': HeaderComponent
}


/bloomreach.component.html
<br-page
  [configuration]="configuration"
  [mapping]="mapping"
  class="d-flex flex-column vh-100"
>
  <ng-template let-page="page">
    <header>
      <nav
        class="navbar navbar-expand-sm navbar-dark sticky-top bg-dark"
        role="navigation"
      >
        <div class="container">
<!--          <a-->
<!--            class="navbar-brand"-->
<!--            [routerLink]="page?.getUrl('/') | parseUrl: 'pathname'"-->
<!--            [queryParams]="page?.getUrl('/') | parseUrl: 'searchParams'"-->
<!--          >-->
<!--            {{ page?.getTitle() || "brXM + Angular = ♥️" }}-->
<!--          </a>-->
          <div class="collapse navbar-collapse">
            <ng-container brComponent="menu"></ng-container>
          </div>
        </div>
      </nav>
    </header>
    <section class="container flex-fill pt-3">
      <ng-container brComponent="main"></ng-container>
    </section>
    <footer class="bg-dark text-light py-3">
      <div class="container clearfix">
        <div class="float-left pr-3">&copy; Bloomreach</div>
        <div class="overflow-hidden">
          <ng-container brComponent="footer"></ng-container>
        </div>
      </div>
    </footer>
  </ng-template>
</br-page>