add translations module & fix api path interceptor

src/index.ts

@@ -18,3 +18,4 @@ export * from './lib/empty-states';
 export * from './lib/scrollbar';
 export * from './lib/caching';
 export * from './lib/users';
+export * from './lib/translations';

src/lib/common-ui.module.ts

@@ -35,7 +35,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { HumanizeCamelCasePipe } from './utils/pipes/humanize-camel-case.pipe';
 import { ApiPathInterceptor, IqserConfigService, IqserUserPreferenceService } from './services';
 import { DefaultUserPreferenceService } from './services/default-user-preference.service';
-import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 
 const matModules = [
     MatIconModule,
@@ -47,7 +47,6 @@ const matModules = [
     MatProgressBarModule,
 ];
 const modules = [
-    TranslateModule,
     IqserIconsModule,
     IqserButtonsModule,
     IqserListingModule,
@@ -55,6 +54,7 @@ const modules = [
     IqserInputsModule,
     IqserScrollbarModule,
     IqserEmptyStatesModule,
+    HttpClientModule,
 ];
 const components = [
     StatusBarComponent,
@@ -77,8 +77,15 @@ const pipes = [SortByPipe, HumanizePipe, CapitalizePipe, HumanizeCamelCasePipe];
 
 @NgModule({
     declarations: [...components, ...pipes],
-    imports: [CommonModule, ...matModules, ...modules, FormsModule, ReactiveFormsModule],
+    imports: [CommonModule, ...matModules, ...modules, FormsModule, ReactiveFormsModule, TranslateModule],
     exports: [...components, ...pipes, ...modules],
+    providers: [
+        {
+            provide: HTTP_INTERCEPTORS,
+            multi: true,
+            useClass: ApiPathInterceptor,
+        },
+    ],
 })
 export class CommonUiModule extends ModuleWithOptions {
     static forRoot<
@@ -96,15 +103,7 @@ export class CommonUiModule extends ModuleWithOptions {
 
         return {
             ngModule: CommonUiModule,
-            providers: [
-                userPreferenceService,
-                configServiceProviders,
-                {
-                    provide: HTTP_INTERCEPTORS,
-                    multi: true,
-                    useClass: ApiPathInterceptor,
-                },
-            ],
+            providers: [userPreferenceService, configServiceProviders],
         };
     }
 

src/lib/translations/http-loader-factory.ts

@@ -0,0 +1,11 @@
+import { HttpClient } from '@angular/common/http';
+import { PruningTranslationLoader } from '../utils';
+import { IqserConfigService } from '../services';
+import { inject } from '@angular/core';
+
+export function pruningTranslationLoaderFactory(pathPrefix: string): PruningTranslationLoader {
+    const httpClient = inject(HttpClient);
+    const version = inject(IqserConfigService).values.FRONTEND_APP_VERSION;
+
+    return new PruningTranslationLoader(httpClient, pathPrefix, `.json?version=${version}`);
+}

src/lib/translations/index.ts

@@ -0,0 +1,4 @@
+export * from './connection-status-translations';
+export * from './iqser-translate-module-options';
+export * from './iqser-translate.module';
+export * from './http-loader-factory';

src/lib/translations/iqser-translate-module-options.ts

@@ -0,0 +1,3 @@
+export interface IqserTranslateModuleOptions {
+    readonly pathPrefix?: string;
+}

src/lib/translations/iqser-translate.module.ts

@@ -0,0 +1,36 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { TranslateCompiler, TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler';
+import { pruningTranslationLoaderFactory } from './http-loader-factory';
+import { IqserTranslateModuleOptions } from './iqser-translate-module-options';
+
+const translateLoaderToken = 'translateLoader';
+
+@NgModule({
+    imports: [
+        TranslateModule.forRoot({
+            loader: {
+                provide: TranslateLoader,
+                useExisting: translateLoaderToken,
+            },
+            compiler: {
+                provide: TranslateCompiler,
+                useClass: TranslateMessageFormatCompiler,
+            },
+        }),
+    ],
+    exports: [TranslateModule],
+})
+export class IqserTranslateModule {
+    static forRoot(options?: IqserTranslateModuleOptions): ModuleWithProviders<IqserTranslateModule> {
+        return {
+            ngModule: IqserTranslateModule,
+            providers: [
+                {
+                    provide: translateLoaderToken,
+                    useFactory: () => pruningTranslationLoaderFactory(options?.pathPrefix ?? '/assets/i18n/'),
+                },
+            ],
+        };
+    }
+}

src/lib/users/iqser-users.module.ts

@@ -1,5 +1,4 @@
 import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
-import { HttpClientModule } from '@angular/common/http';
 
 import { KeycloakAngularModule, KeycloakOptions, KeycloakService } from 'keycloak-angular';
 import { DefaultUserService } from './services/default-user.service';
@@ -58,7 +57,7 @@ export function keycloakInitializer(
 const components = [NamePipe, InitialsAvatarComponent, UserButtonComponent];
 
 @NgModule({
-    imports: [HttpClientModule, KeycloakAngularModule, MatTooltipModule, CommonModule, MatIconModule, MatButtonModule],
+    imports: [KeycloakAngularModule, MatTooltipModule, CommonModule, MatIconModule, MatButtonModule],
     declarations: [...components],
     exports: [...components],
 })