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 { 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() { }
}