fix: fixed translation cache loading

markuczy · Jul 11, 2024 · 28ba600 · 28ba600
1 parent bf0cc8c
commit 28ba600
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 14 deletions.
diff --git a/libs/angular-accelerator/src/lib/services/translation-cache.service.ts b/libs/angular-accelerator/src/lib/services/translation-cache.service.ts
@@ -13,17 +13,19 @@ class TranslationCacheTopic extends SyncableTopic<Record<string, any>> {
 
 @Injectable({ providedIn: 'root' })
 export class TranslationCacheService implements OnDestroy {
+  private id: string = ''
   private translationTopic$ = new TranslationCacheTopic()
   private translations$ = new BehaviorSubject<any>({})
   constructor() {
     this.translationTopic$
       .pipe(
+        filter((message) => message['id'] === this.id),
         withLatestFrom(this.translations$),
         map(([topicTranslations, translations]) => {
           let foundValueOthersDoNotKnow = false
           const newTranslations = { ...translations }
           Object.keys(topicTranslations).forEach((k) => {
-            if (!topicTranslations[k] && translations[k]) {
+            if (!topicTranslations[k] && translations[k] && k !== this.id) {
               foundValueOthersDoNotKnow = true
             }
             newTranslations[k] ??= topicTranslations[k]
@@ -43,19 +45,23 @@ export class TranslationCacheService implements OnDestroy {
     this.translationTopic$.destroy()
   }
 
+  setId(id: string) {
+    this.id = 'translation-'.concat(id)
+  }
+
   getTranslationFile(url: string, cacheMissFunction: () => Observable<any>): Observable<any> {
     if (this.translations$.value[url]) {
       return of(this.translations$.value[url])
     }
-    this.translationTopic$.publish({ ...this.translations$.value, [url]: null })
+    this.translationTopic$.publish({ ...this.translations$.value, [url]: null, id: this.id })
     return race(
       this.translations$.pipe(
         filter((t) => t[url]),
         map((t) => t[url])
       ),
       cacheMissFunction().pipe(
         tap((t) => {
-          this.translationTopic$.publish({ ...this.translations$.value, [url]: t })
+          this.translationTopic$.publish({ ...this.translations$.value, [url]: t, id: this.id })
         })
       )
     ).pipe(first())

diff --git a/libs/angular-accelerator/src/lib/utils/create-remote-component-translate-loader.utils.ts b/libs/angular-accelerator/src/lib/utils/create-remote-component-translate-loader.utils.ts
@@ -1,6 +1,6 @@
 import { Location } from '@angular/common'
 import { HttpClient } from '@angular/common/http'
-import { inject } from '@angular/core'
+import { inject, InjectionToken } from '@angular/core'
 import { TranslateLoader } from '@ngx-translate/core'
 import { map, ReplaySubject, tap } from 'rxjs'
 import { TranslationCacheService } from '../services/translation-cache.service'
@@ -10,14 +10,18 @@ import { TranslateCombinedLoader } from './translate.combined.loader'
 
 let lastTranslateLoaderTimerId = 0
 
+export const REMOTE_COMPONENT_ID = new InjectionToken<string>('REMOTE_COMPONENT_ID')
+
 export function createRemoteComponentTranslateLoader(
   http: HttpClient,
   baseUrlReplaySubject$: ReplaySubject<string>,
+  remoteComponentId: string,
   translationCacheService?: TranslationCacheService
 ): TranslateLoader {
   const ts = translationCacheService ?? inject(TranslationCacheService)
+  ts.setId(remoteComponentId)
   const timerId = lastTranslateLoaderTimerId++
-  
+
   console.time('createRemoteComponentTranslateLoader_' + timerId)
   return new AsyncTranslateLoader(
     baseUrlReplaySubject$.pipe(

diff --git a/libs/angular-webcomponents/src/lib/utils/webcomponent-bootstrap.utils.ts b/libs/angular-webcomponents/src/lib/utils/webcomponent-bootstrap.utils.ts
@@ -1,6 +1,7 @@
 import { createCustomElement } from '@angular/elements'
 import { createApplication, platformBrowser } from '@angular/platform-browser'
 import {
+  ApplicationRef,
   EnvironmentProviders,
   Injector,
   NgModuleRef,
@@ -75,11 +76,11 @@ function adaptRemoteComponentRoutes(injector: Injector) {
     return
   }
 
-  if(!router.config.find((val) => val.path === '**')) {
+  if (!router.config.find((val) => val.path === '**')) {
     router.resetConfig(
       router.config.concat({
         path: '**',
-        children: []
+        children: [],
       })
     )
   }
@@ -140,11 +141,15 @@ function connectMicroFrontendRouter(injector: Injector, warn: boolean = true) {
 function connectRouter(router: Router): void {
   const initialUrl = `${location.pathname.substring(getLocation().deploymentPath.length)}${location.search}`
   router.navigateByUrl(initialUrl)
-  const observer = new EventsTopic();
-  observer.pipe(filter((e) => e.type === 'navigated')).subscribe(() => {
-    const routerUrl = `${location.pathname.substring(
-      getLocation().deploymentPath.length
-    )}${location.search}`;
-    router.navigateByUrl(routerUrl);
-  });
+  let lastUrl = initialUrl
+  // const observer = new EventsTopic()
+  // observer.pipe(filter((e) => e.type === 'navigated')).subscribe(() => {
+  //   const routerUrl = `${location.pathname.substring(
+  //     getLocation().deploymentPath.length
+  //   )}${location.search}`;
+  //   if (routerUrl !== lastUrl) {
+  //     lastUrl = routerUrl;
+  //     router.navigateByUrl(routerUrl);
+  //   }
+  // });
 }