ing

src/app/app-l10n.module.ts

@@ -0,0 +1,53 @@
+import { NgModule, APP_INITIALIZER } from '@angular/core';
+import { BrowserModule, Title } from '@angular/platform-browser';
+
+import {
+  L10nConfig,
+  L10nLoader,
+  LocalizationModule,
+  LocaleValidationModule,
+  StorageStrategy,
+  ProviderType
+} from 'angular-l10n';
+
+const l10nConfig: L10nConfig = {
+  locale: {
+      languages: [
+          { code: 'en', dir: 'ltr' },
+          { code: 'kr', dir: 'ltr' },
+      ],
+      defaultLocale: { languageCode: 'en', countryCode: 'US' },
+      storage: StorageStrategy.Cookie,
+      cookieExpiration: 30
+  },
+  translation: {
+      providers: [
+          { type: ProviderType.Static, prefix: './assets/translations/of-' }
+      ],
+      caching: true,
+      composedKeySeparator: '.',
+      missingValue: 'No key',
+      i18nPlural: true
+  }
+};
+
+export function initL10n(l10nLoader: L10nLoader): Function {
+  return () => l10nLoader.load();
+}
+
+@NgModule({
+  imports: [
+    LocalizationModule.forRoot(l10nConfig),
+    LocaleValidationModule.forRoot()
+  ],
+  providers: [
+    Title,
+    {
+      provide: APP_INITIALIZER,
+      useFactory: initL10n,
+      deps: [L10nLoader],
+      multi: true
+    }
+  ],
+})
+export class AppL10NModule { }

src/app/app.module.ts

@@ -1,12 +1,14 @@
-import { NgModule, APP_INITIALIZER } from '@angular/core';
+import { NgModule } from '@angular/core';
 
-import { BrowserModule, Title } from '@angular/platform-browser';
+import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { HttpClientModule } from '@angular/common/http';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppStoreModule } from './app-store.module';
+import { AppL10NModule } from './app-l10n.module';
+
 import { MaterialModule } from './commons/ui/material/material.module';
 import { CovalentModule } from './commons/ui/covalent/covalent.module';
 
@@ -16,66 +18,24 @@ import { environment } from '../environments/environment';
 import { RESTService } from 'packages/commons/service/rest.service';
 import { RPCService } from 'packages/commons/service/rpc.service';
 
-import {
-  L10nConfig,
-  L10nLoader,
-  LocalizationModule,
-  LocaleValidationModule,
-  StorageStrategy,
-  ProviderType
-} from 'angular-l10n';
-
-const l10nConfig: L10nConfig = {
-  locale: {
-      languages: [
-          { code: 'en', dir: 'ltr' },
-          { code: 'kr', dir: 'ltr' },
-      ],
-      defaultLocale: { languageCode: 'en', countryCode: 'US' },
-      storage: StorageStrategy.Cookie,
-      cookieExpiration: 30
-  },
-  translation: {
-      providers: [
-          { type: ProviderType.Static, prefix: './assets/translations/of-' }
-      ],
-      caching: true,
-      composedKeySeparator: '.',
-      missingValue: 'No key',
-      i18nPlural: true
-  }
-};
-
-export function initL10n(l10nLoader: L10nLoader): Function {
-  return () => l10nLoader.load();
-}
-
 @NgModule({
-  declarations: [
-    AppComponent,
-  ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     AppRoutingModule,
     AppStoreModule,
+    AppL10NModule,
     MaterialModule,
     CovalentModule,
     HttpClientModule,
-    LocalizationModule.forRoot(l10nConfig),
-    LocaleValidationModule.forRoot()
   ],
   providers: [
     {provide: 'REST_BASE_URL', useValue: environment.restBaseURL},
     {provide: 'RPC_BASE_URL', useValue: environment.rpcBaseURL},
     RESTService, RPCService,
-    Title,
+  ],
-    {
+  declarations: [
-      provide: APP_INITIALIZER,
+    AppComponent,
-      useFactory: initL10n,
-      deps: [L10nLoader],
-      multi: true
-    }
   ],
   bootstrap: [AppComponent]
 })