Update Translation Path Factories

Update Imports

Remove createTranslateLoader, createRemoteComponentAndMfeTranslateLoader, createRemoteComponentTranslateLoader, translationPathFactory, remoteComponentTranslationPathFactory and TRANSLATION_PATH imports from @onecx/angular-accelerator.
Add provideTranslationPathFromMeta, createTranslateLoader and TRANSLATION_PATH from @onecx/angular-utils.'
Add provideTranslateServiceForRoot from @onecx/angular-utils

If you need to support multiple locales and fallback for missing translations, use AngularAcceleratorMissingTranslationHandler from @onecx/angular-utils as the MissingTranslationHandler. This handler logs missing translation keys and provides a fallback mechanism. For a reference see the example in the Configure Translation Providers for Remote Components section.

Example - Replace translationPathFactory with provideTranslationPathFromMeta

Before:

import { TRANSLATION_PATH, translationPathFactory } from '@onecx/angular-accelerator';

@NgModule({
    providers: [
        // ... other providers,
        {
            provide: TRANSLATION_PATH,
            useFactory: (appStateService: AppStateService) => translationPathFactory('assets/i18n/')(appStateService),
            multi: true,
            deps: [AppStateService]
        }
    ]
})

After:

imports { provideTranslationPathFromMeta } from '@onecx/angular-utils';

@NgModule({
    providers: [
        // ... other providers,
        provideTranslationPathFromMeta(import.meta.url, 'assets/i18n/')
    ]
})

Example - Replace remoteComponentTranslationPathFactory with provideTranslationPathFromMeta

Before:

import { TRANSLATION_PATH, remoteComponentTranslationPathFactory } from '@onecx/angular-accelerator';

bootstrapRemoteComponent(RemoteComponent, 'ocx-my-remote-component', environment.production, [
    // ... other providers
    {
        provide: TRANSLATION_PATH,
        useFactory: (remoteComponentConfig: ReplaySubject<RemoteComponentConfig>) =>
            remoteComponentTranslationPathFactory('assets/i18n/')(remoteComponentConfig),
        multi: true,
        deps: [REMOTE_COMPONENT_CONFIG]
    },
]);

After:

import { provideTranslationPathFromMeta } from '@onecx/angular-utils';

bootstrapRemoteComponent(RemoteComponent, 'ocx-my-remote-component', environment.production, [
    // ... other providers
    provideTranslationPathFromMeta(import.meta.url, 'assets/i18n/')
]);

Use provideTranslationPathFromMeta with import.meta.url as the first argument and the location of your application’s i18n files as the second argument.
Use provideTranslateServiceForRoot, which takes a TranslateModuleConfig object for a custom translation loader, custom translation compiler, and custom missing translation handler. It also supports the isolate option to create an isolated TranslateService instance, extending the root TranslateService, and allows you to set options related to the default language.

Hint: To ensure the correct file path is used for import.meta.url, add the following to your application’s webpack.config.js:

module.exports = {
 ...
  module: { parser: { javascript: { importMeta: false } } }
}

Configure Translation Providers for Remote Components

In OneCX v6, For each Remote Component translation related providers are required to be defined in the bootstrap.ts instead of the component.ts file. For multiple locales and fallback translations, use AngularAcceleratorMissingTranslationHandler.

Use provideTranslationPathFromMeta with import.meta.url as the first argument and the location of your application’s i18n files as the second argument.

Example

Before:

import { TRANSLATION_PATH, translationPathFactory } from '@onecx/angular-accelerator';

@Component({
  selector: 'ocx-my-remote',
  templateUrl: './my-remote.component.html',
  providers: [
    {
      provide: TRANSLATION_PATH,
      useFactory: (appStateService: AppStateService) =>
        translationPathFactory('assets/i18n/')(appStateService),
      deps: [AppStateService],
      multi: true,
    },
  ]
})
export class MyRemoteComponent {}

After:

import { provideTranslationPathFromMeta, provideTranslateServiceForRoot, createTranslateLoader } from '@onecx/angular-utils';
import { MissingTranslationHandler } from '@ngx-translate/core';
import { AngularAcceleratorMissingTranslationHandler } from '@onecx/angular-utils';

bootstrapRemoteComponent(
  MyRemoteComponent,
  'ocx-my-remote',
  environment.production,
  [
    { provide: REMOTE_COMPONENT_CONFIG, useValue: new ReplaySubject<RemoteComponentConfig>(1) },
    provideTranslationPathFromMeta(import.meta.url, 'assets/i18n/'),
    provideTranslateServiceForRoot({
        isolate: true,
        loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      },
      // Optionally, add MissingTranslationHandler for logging and fallback
      missingTranslationHandler: {
          provide: MissingTranslationHandler,
          useClass: AngularAcceleratorMissingTranslationHandler
        }
    })
  ]
)