fix: use an observable for getting translations

package.json

@@ -49,11 +49,11 @@
     "@ngneat/falso": "^6.4.0",
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^7.0.0",
-    "@onecx/accelerator": "^4.1.0",
-    "@onecx/integration-interface": "^4.1.0",
-    "@onecx/keycloak-auth": "^4.1.0",
-    "@onecx/portal-integration-angular": "^4.1.0",
-    "@onecx/portal-layout-styles": "^4.1.0",
+    "@onecx/accelerator": "^4.1.2",
+    "@onecx/integration-interface": "^4.1.2",
+    "@onecx/keycloak-auth": "^4.1.2",
+    "@onecx/portal-integration-angular": "^4.1.2",
+    "@onecx/portal-layout-styles": "^4.1.2",
     "file-saver": "^2.0.5",
     "i18n-iso-countries": "^7.6.0",
     "ngx-color": "^8.0.3",

src/app/app.component.spec.ts

@@ -1,7 +1,8 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core'
 import { TestBed } from '@angular/core/testing'
-import { AppComponent } from './app.component'
 import { RouterTestingModule } from '@angular/router/testing'
-import { NO_ERRORS_SCHEMA } from '@angular/core'
+
+import { AppComponent } from './app.component'
 
 describe('AppComponent', () => {
   beforeEach(async () => {

src/app/onecx-theme-remote.module.ts

@@ -1,7 +1,16 @@
+import { HttpClient } from '@angular/common/http'
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
+import { MissingTranslationHandler, TranslateLoader, TranslateModule } from '@ngx-translate/core'
 
-import { addInitializeModuleGuard, InitializeModuleGuard, PortalCoreModule } from '@onecx/portal-integration-angular'
+import {
+  addInitializeModuleGuard,
+  AppStateService,
+  ConfigurationService,
+  createTranslateLoader,
+  PortalCoreModule,
+  PortalMissingTranslationHandler
+} from '@onecx/portal-integration-angular'
 
 const routes: Routes = [
   {
@@ -10,9 +19,21 @@ const routes: Routes = [
   }
 ]
 @NgModule({
-  imports: [PortalCoreModule.forMicroFrontend(), RouterModule.forChild(addInitializeModuleGuard(routes))],
+  imports: [
+    PortalCoreModule.forMicroFrontend(),
+    RouterModule.forChild(addInitializeModuleGuard(routes)),
+    TranslateModule.forRoot({
+      isolate: true,
+      loader: {
+        provide: TranslateLoader,
+        useFactory: createTranslateLoader,
+        deps: [HttpClient, AppStateService]
+      },
+      missingTranslationHandler: { provide: MissingTranslationHandler, useClass: PortalMissingTranslationHandler }
+    })
+  ],
   exports: [],
-  providers: [InitializeModuleGuard],
+  providers: [ConfigurationService],
   schemas: []
 })
 export class OneCXThemeModule {

src/app/shared/label.resolver.ts

@@ -1,14 +1,15 @@
 import { Injectable } from '@angular/core'
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router'
 import { TranslateService } from '@ngx-translate/core'
-import { Observable } from 'rxjs'
+import { Observable, map } from 'rxjs'
 
 //dont use `providedIn root` - wont work when we are in shell
 @Injectable()
 export class LabelResolver implements Resolve<string> {
   constructor(private translate: TranslateService) {}
-  /* eslint-disable @typescript-eslint/no-unused-vars */
-  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): string | Observable<string> | Promise<string> {
-    return route.data['breadcrumb'] ? this.translate.instant(route.data['breadcrumb']) : route.routeConfig?.path
+  resolve(route: ActivatedRouteSnapshot, _state: RouterStateSnapshot): string | Observable<string> | Promise<string> {
+    return route.data['breadcrumb']
+      ? this.translate.get(route.data['breadcrumb']).pipe(map((t) => t.toString()))
+      : route.routeConfig?.path ?? ''
   }
 }

src/app/shared/shared.module.ts

@@ -1,14 +1,7 @@
 import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { HttpClient } from '@angular/common/http'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import {
-  MissingTranslationHandler,
-  MissingTranslationHandlerParams,
-  TranslateLoader,
-  TranslateModule,
-  TranslateService
-} from '@ngx-translate/core'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { ColorSketchModule } from 'ngx-color/sketch'
 import { ErrorTailorModule } from '@ngneat/error-tailor'
 
@@ -37,28 +30,20 @@ import { ToastModule } from 'primeng/toast'
 import {
   AppStateService,
   ConfigurationService,
-  createTranslateLoader,
   PortalDialogService,
   PortalApiConfiguration
 } from '@onecx/portal-integration-angular'
 
-import { Configuration } from '../generated'
+import { Configuration } from 'src/app/generated'
 import { LabelResolver } from './label.resolver'
-import { environment } from '../../environments/environment'
+import { environment } from 'src/environments/environment'
 import { ImageContainerComponent } from './image-container/image-container.component'
 import { ThemeColorBoxComponent } from './theme-color-box/theme-color-box.component'
 
 export function apiConfigProvider(configService: ConfigurationService, appStateService: AppStateService) {
   return new PortalApiConfiguration(Configuration, environment.apiPrefix, configService, appStateService)
 }
 
-export class MyMissingTranslationHandler implements MissingTranslationHandler {
-  handle(params: MissingTranslationHandlerParams) {
-    console.log(`Missing translation for ${params.key}`)
-    return params.key
-  }
-}
-
 @NgModule({
   declarations: [ImageContainerComponent, ThemeColorBoxComponent],
   imports: [
@@ -86,15 +71,7 @@ export class MyMissingTranslationHandler implements MissingTranslationHandler {
     TabViewModule,
     TableModule,
     ToastModule,
-    TranslateModule.forRoot({
-      isolate: true,
-      loader: {
-        provide: TranslateLoader,
-        useFactory: createTranslateLoader,
-        deps: [HttpClient, AppStateService]
-      },
-      missingTranslationHandler: { provide: MissingTranslationHandler, useClass: MyMissingTranslationHandler }
-    }),
+    TranslateModule,
     ErrorTailorModule.forRoot({
       controlErrorsOn: { async: true, blur: true, change: true },
       errors: {

src/app/theme/theme-designer/theme-designer.component.html

@@ -2,7 +2,7 @@
   <ocx-page-header
     header="{{ theme ? theme.name : 'Theme Designer' }}"
     [subheader]="'THEME.DESIGNER.' + mode + '.SUBHEADER' | translate"
-    [actions]="actions"
+    [actions]="(actions$ | async) ?? []"
     [figureImage]="fetchingLogoUrl"
     [figureBackground]="!fetchingLogoUrl"
   ></ocx-page-header>