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

This commit is contained in:
Max Peintner 2021-06-01 08:40:33 +02:00 committed by GitHub
parent 6ce4e83d36
commit d61baadfd9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,6 +1,6 @@
import { OverlayModule } from '@angular/cdk/overlay'; import { OverlayModule } from '@angular/cdk/overlay';
import { CommonModule, registerLocaleData } from '@angular/common'; 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 localeDe from '@angular/common/locales/de';
import { APP_INITIALIZER, NgModule } from '@angular/core'; import { APP_INITIALIZER, NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms';
@ -20,9 +20,9 @@ import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ServiceWorkerModule } from '@angular/service-worker'; import { ServiceWorkerModule } from '@angular/service-worker';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core'; import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AuthConfig, OAuthModule, OAuthStorage } from 'angular-oauth2-oidc'; import { AuthConfig, OAuthModule, OAuthStorage } from 'angular-oauth2-oidc';
import { QuicklinkModule } from 'ngx-quicklink'; import { QuicklinkModule } from 'ngx-quicklink';
import { from, Observable } from 'rxjs';
import { OnboardingModule } from 'src/app/modules/onboarding/onboarding.module'; import { OnboardingModule } from 'src/app/modules/onboarding/onboarding.module';
import { RegExpPipeModule } from 'src/app/pipes/regexp-pipe/regexp-pipe.module'; import { RegExpPipeModule } from 'src/app/pipes/regexp-pipe/regexp-pipe.module';
import { SubscriptionService } from 'src/app/services/subscription.service'; import { SubscriptionService } from 'src/app/services/subscription.service';
@ -55,136 +55,136 @@ import { ThemeService } from './services/theme.service';
registerLocaleData(localeDe); registerLocaleData(localeDe);
// AoT requires an exported function for factories export class WebpackTranslateLoader implements TranslateLoader {
export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader { getTranslation(lang: string): Observable<any> {
return new TranslateHttpLoader(http, './assets/i18n/'); return from(import(`../assets/i18n/${lang}.json`));
}
} }
const appInitializerFn = (grpcServ: GrpcService) => { const appInitializerFn = (grpcServ: GrpcService) => {
return () => { return () => {
return grpcServ.loadAppEnvironment(); return grpcServ.loadAppEnvironment();
}; };
}; };
const stateHandlerFn = (stateHandler: StatehandlerService) => { const stateHandlerFn = (stateHandler: StatehandlerService) => {
return () => { return () => {
return stateHandler.initStateHandler(); return stateHandler.initStateHandler();
}; };
}; };
const authConfig: AuthConfig = { const authConfig: AuthConfig = {
scope: 'openid profile email', // offline_access scope: 'openid profile email', // offline_access
responseType: 'code', responseType: 'code',
oidc: true, oidc: true,
}; };
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent,
SignedoutComponent, SignedoutComponent,
], ],
imports: [ imports: [
AppRoutingModule, AppRoutingModule,
CommonModule, CommonModule,
BrowserModule, BrowserModule,
OverlayModule, OverlayModule,
OAuthModule.forRoot({ OAuthModule.forRoot({
resourceServer: { 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'], 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, sendAccessToken: true,
}, },
}), }),
TranslateModule.forRoot({ TranslateModule.forRoot({
loader: { loader: {
provide: TranslateLoader, provide: TranslateLoader,
useFactory: HttpLoaderFactory, useClass: WebpackTranslateLoader,
deps: [HttpClient], },
}, }),
}), MatNativeDateModule,
MatNativeDateModule, QuicklinkModule,
QuicklinkModule, AccountsCardModule,
AccountsCardModule, HasRoleModule,
HasRoleModule, BrowserAnimationsModule,
BrowserAnimationsModule, HttpClientModule,
HttpClientModule, MatButtonModule,
MatButtonModule, MatIconModule,
MatIconModule, MatTooltipModule,
MatTooltipModule, MatSidenavModule,
MatSidenavModule, MatCardModule,
MatCardModule, OutsideClickModule,
OutsideClickModule, InputModule,
InputModule, HasRolePipeModule,
HasRolePipeModule, HasFeaturePipeModule,
HasFeaturePipeModule, MatProgressBarModule,
MatProgressBarModule, MatProgressSpinnerModule,
MatProgressSpinnerModule, MatToolbarModule,
MatToolbarModule, ReactiveFormsModule,
ReactiveFormsModule, MatMenuModule,
MatMenuModule, MatSnackBarModule,
MatSnackBarModule, AvatarModule,
AvatarModule, WarnDialogModule,
WarnDialogModule, MatDialogModule,
MatDialogModule, RegExpPipeModule,
RegExpPipeModule, OnboardingModule,
OnboardingModule, ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }), ],
], providers: [
providers: [ ThemeService,
ThemeService, {
{ provide: APP_INITIALIZER,
provide: APP_INITIALIZER, useFactory: appInitializerFn,
useFactory: appInitializerFn, multi: true,
multi: true, deps: [GrpcService],
deps: [GrpcService], },
}, {
{ provide: APP_INITIALIZER,
provide: APP_INITIALIZER, useFactory: stateHandlerFn,
useFactory: stateHandlerFn, multi: true,
multi: true, deps: [StatehandlerService],
deps: [StatehandlerService], },
}, {
{ provide: AuthConfig,
provide: AuthConfig, useValue: authConfig,
useValue: authConfig, },
}, {
{ provide: StatehandlerProcessorService,
provide: StatehandlerProcessorService, useClass: StatehandlerProcessorServiceImpl,
useClass: StatehandlerProcessorServiceImpl, },
}, {
{ provide: StatehandlerService,
provide: StatehandlerService, useClass: StatehandlerServiceImpl,
useClass: StatehandlerServiceImpl, },
}, {
{ provide: OAuthStorage,
provide: OAuthStorage, useClass: StorageService,
useClass: StorageService, },
}, {
{ provide: GRPC_INTERCEPTORS,
provide: GRPC_INTERCEPTORS, multi: true,
multi: true, useClass: AuthInterceptor,
useClass: AuthInterceptor, },
}, {
{ provide: GRPC_INTERCEPTORS,
provide: GRPC_INTERCEPTORS, multi: true,
multi: true, useClass: I18nInterceptor,
useClass: I18nInterceptor, },
}, {
{ provide: GRPC_INTERCEPTORS,
provide: GRPC_INTERCEPTORS, multi: true,
multi: true, useClass: OrgInterceptor,
useClass: OrgInterceptor, },
}, SeoService,
SeoService, RefreshService,
RefreshService, GrpcService,
GrpcService, AuthenticationService,
AuthenticationService, GrpcAuthService,
GrpcAuthService, SubscriptionService,
SubscriptionService, { provide: 'windowObject', useValue: window },
{ provide: 'windowObject', useValue: window }, ],
], bootstrap: [AppComponent],
bootstrap: [AppComponent],
}) })
export class AppModule { export class AppModule {
constructor() { } constructor() { }
} }