fix: use webpack to load i18n files on buildtime (#1797)

2025-02-28 12:17:24 +00:00 · 2021-06-01 08:40:33 +02:00 · 2021-06-01 08:40:33 +02:00 · d61baadfd9
commit d61baadfd9
parent 6ce4e83d36
1 changed files with 119 additions and 119 deletions
--- a/console/src/app/app.module.ts
+++ b/console/src/app/app.module.ts
@ -1,6 +1,6 @@
 import { OverlayModule } from '@angular/cdk/overlay';
 import { CommonModule, registerLocaleData } from '@angular/common';
-import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { HttpClientModule } from '@angular/common/http';
 import localeDe from '@angular/common/locales/de';
 import { APP_INITIALIZER, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
@ -20,9 +20,9 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { AuthConfig, OAuthModule, OAuthStorage } from 'angular-oauth2-oidc';
 import { QuicklinkModule } from 'ngx-quicklink';
+import { from, Observable } from 'rxjs';
 import { OnboardingModule } from 'src/app/modules/onboarding/onboarding.module';
 import { RegExpPipeModule } from 'src/app/pipes/regexp-pipe/regexp-pipe.module';
 import { SubscriptionService } from 'src/app/services/subscription.service';
@ -55,136 +55,136 @@ import { ThemeService } from './services/theme.service';

 registerLocaleData(localeDe);

-// AoT requires an exported function for factories
-export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
-    return new TranslateHttpLoader(http, './assets/i18n/');
+export class WebpackTranslateLoader implements TranslateLoader {
+  getTranslation(lang: string): Observable<any> {
+    return from(import(`../assets/i18n/${lang}.json`));
+  }
 }

 const appInitializerFn = (grpcServ: GrpcService) => {
-    return () => {
-        return grpcServ.loadAppEnvironment();
-    };
+  return () => {
+    return grpcServ.loadAppEnvironment();
+  };
 };

 const stateHandlerFn = (stateHandler: StatehandlerService) => {
-    return () => {
-        return stateHandler.initStateHandler();
-    };
+  return () => {
+    return stateHandler.initStateHandler();
+  };
 };

 const authConfig: AuthConfig = {
-    scope: 'openid profile email', // offline_access
-    responseType: 'code',
-    oidc: true,
+  scope: 'openid profile email', // offline_access
+  responseType: 'code',
+  oidc: true,
 };

@NgModule({
-    declarations: [
-        AppComponent,
-        SignedoutComponent,
-    ],
-    imports: [
-        AppRoutingModule,
-        CommonModule,
-        BrowserModule,
-        OverlayModule,
-        OAuthModule.forRoot({
-            resourceServer: {
-                allowedUrls: ['https://test.api.zitadel.caos.ch/caos.zitadel.auth.api.v1.AuthService', 'https://test.api.zitadel.caos.ch/oauth/v2/userinfo', 'https://test.api.zitadel.caos.ch/caos.zitadel.management.api.v1.ManagementService/', 'https://preview.api.zitadel.caos.ch'],
-                sendAccessToken: true,
-            },
-        }),
-        TranslateModule.forRoot({
-            loader: {
-                provide: TranslateLoader,
-                useFactory: HttpLoaderFactory,
-                deps: [HttpClient],
-            },
-        }),
-        MatNativeDateModule,
-        QuicklinkModule,
-        AccountsCardModule,
-        HasRoleModule,
-        BrowserAnimationsModule,
-        HttpClientModule,
-        MatButtonModule,
-        MatIconModule,
-        MatTooltipModule,
-        MatSidenavModule,
-        MatCardModule,
-        OutsideClickModule,
-        InputModule,
-        HasRolePipeModule,
-        HasFeaturePipeModule,
-        MatProgressBarModule,
-        MatProgressSpinnerModule,
-        MatToolbarModule,
-        ReactiveFormsModule,
-        MatMenuModule,
-        MatSnackBarModule,
-        AvatarModule,
-        WarnDialogModule,
-        MatDialogModule,
-        RegExpPipeModule,
-        OnboardingModule,
-        ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
-    ],
-    providers: [
-        ThemeService,
-        {
-            provide: APP_INITIALIZER,
-            useFactory: appInitializerFn,
-            multi: true,
-            deps: [GrpcService],
-        },
-        {
-            provide: APP_INITIALIZER,
-            useFactory: stateHandlerFn,
-            multi: true,
-            deps: [StatehandlerService],
-        },
-        {
-            provide: AuthConfig,
-            useValue: authConfig,
-        },
-        {
-            provide: StatehandlerProcessorService,
-            useClass: StatehandlerProcessorServiceImpl,
-        },
-        {
-            provide: StatehandlerService,
-            useClass: StatehandlerServiceImpl,
-        },
-        {
-            provide: OAuthStorage,
-            useClass: StorageService,
-        },
-        {
-            provide: GRPC_INTERCEPTORS,
-            multi: true,
-            useClass: AuthInterceptor,
-        },
-        {
-            provide: GRPC_INTERCEPTORS,
-            multi: true,
-            useClass: I18nInterceptor,
-        },
-        {
-            provide: GRPC_INTERCEPTORS,
-            multi: true,
-            useClass: OrgInterceptor,
-        },
-        SeoService,
-        RefreshService,
-        GrpcService,
-        AuthenticationService,
-        GrpcAuthService,
-        SubscriptionService,
-        { provide: 'windowObject', useValue: window },
-    ],
-    bootstrap: [AppComponent],
+  declarations: [
+    AppComponent,
+    SignedoutComponent,
+  ],
+  imports: [
+    AppRoutingModule,
+    CommonModule,
+    BrowserModule,
+    OverlayModule,
+    OAuthModule.forRoot({
+      resourceServer: {
+        allowedUrls: ['https://test.api.zitadel.caos.ch/caos.zitadel.auth.api.v1.AuthService', 'https://test.api.zitadel.caos.ch/oauth/v2/userinfo', 'https://test.api.zitadel.caos.ch/caos.zitadel.management.api.v1.ManagementService/', 'https://preview.api.zitadel.caos.ch'],
+        sendAccessToken: true,
+      },
+    }),
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useClass: WebpackTranslateLoader,
+      },
+    }),
+    MatNativeDateModule,
+    QuicklinkModule,
+    AccountsCardModule,
+    HasRoleModule,
+    BrowserAnimationsModule,
+    HttpClientModule,
+    MatButtonModule,
+    MatIconModule,
+    MatTooltipModule,
+    MatSidenavModule,
+    MatCardModule,
+    OutsideClickModule,
+    InputModule,
+    HasRolePipeModule,
+    HasFeaturePipeModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    MatToolbarModule,
+    ReactiveFormsModule,
+    MatMenuModule,
+    MatSnackBarModule,
+    AvatarModule,
+    WarnDialogModule,
+    MatDialogModule,
+    RegExpPipeModule,
+    OnboardingModule,
+    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
+  ],
+  providers: [
+    ThemeService,
+    {
+      provide: APP_INITIALIZER,
+      useFactory: appInitializerFn,
+      multi: true,
+      deps: [GrpcService],
+    },
+    {
+      provide: APP_INITIALIZER,
+      useFactory: stateHandlerFn,
+      multi: true,
+      deps: [StatehandlerService],
+    },
+    {
+      provide: AuthConfig,
+      useValue: authConfig,
+    },
+    {
+      provide: StatehandlerProcessorService,
+      useClass: StatehandlerProcessorServiceImpl,
+    },
+    {
+      provide: StatehandlerService,
+      useClass: StatehandlerServiceImpl,
+    },
+    {
+      provide: OAuthStorage,
+      useClass: StorageService,
+    },
+    {
+      provide: GRPC_INTERCEPTORS,
+      multi: true,
+      useClass: AuthInterceptor,
+    },
+    {
+      provide: GRPC_INTERCEPTORS,
+      multi: true,
+      useClass: I18nInterceptor,
+    },
+    {
+      provide: GRPC_INTERCEPTORS,
+      multi: true,
+      useClass: OrgInterceptor,
+    },
+    SeoService,
+    RefreshService,
+    GrpcService,
+    AuthenticationService,
+    GrpcAuthService,
+    SubscriptionService,
+    { provide: 'windowObject', useValue: window },
+  ],
+  bootstrap: [AppComponent],
 })

 export class AppModule {
-    constructor() { }
+  constructor() { }
 }