refactor: build back new translation loading approach

docs/concepts/configuration.md

@@ -229,10 +229,16 @@ To add other languages except English, German or French:
     { lang: 'nl_NL', currency: 'EUR', value: 'nl', displayName: 'Dutch', displayLong: 'Dutch (Netherlands)' }
    ```
 
-3. Import a [global variant of the locale data](https://angular.io/guide/i18n#import-global-variants-of-the-locale-data) in the [`InternationalizationModule`](../../src/app/core/internationalization.module.ts), e.g.
+3. Import the Angular locale data in the [`InternationalizationModule`](../../src/app/core/internationalization.module.ts):
+
+   ```typescript
+   import localeNl from '@angular/common/locales/nl';
+   ```
+
+4. Register the locale using `registerLocaleData` in the constructor:
+
    ```typescript
-    case 'nl_NL':
-      return import('@angular/common/locales/global/nl');
+   registerLocaleData(localeNl);
    ```
 
 # Further References

src/app/core/internationalization.module.ts

@@ -1,24 +1,13 @@
+import { registerLocaleData } from '@angular/common';
+import localeDe from '@angular/common/locales/de';
+import localeFr from '@angular/common/locales/fr';
 import { Inject, LOCALE_ID, NgModule } from '@angular/core';
 import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
-import { Observable, from, of } from 'rxjs';
-import { map, switchMap, switchMapTo } from 'rxjs/operators';
+import { Observable, from } from 'rxjs';
 
 class WebpackTranslateLoader implements TranslateLoader {
   getTranslation(language: string): Observable<unknown> {
-    return of(language).pipe(
-      map(lang => {
-        switch (lang) {
-          case 'de_DE':
-            return import('@angular/common/locales/global/de');
-          case 'fr_FR':
-            return import('@angular/common/locales/global/fr');
-        }
-      }),
-      switchMap(imp => {
-        const translations$ = from(import(`../../assets/i18n/${language}.json`));
-        return imp ? from(imp).pipe(switchMapTo(translations$)) : translations$;
-      })
-    );
+    return from(import(`../../assets/i18n/${language}.json`));
   }
 }
 
@@ -34,6 +23,9 @@ class WebpackTranslateLoader implements TranslateLoader {
 })
 export class InternationalizationModule {
   constructor(@Inject(LOCALE_ID) lang: string, translateService: TranslateService) {
+    registerLocaleData(localeDe);
+    registerLocaleData(localeFr);
+
     translateService.setDefaultLang(lang.replace(/\-/, '_'));
   }
 }

src/typings.d.ts

@@ -1,10 +1,6 @@
 /* SystemJS module definition */
 declare var module: NodeModule;
 
-declare module '@angular/common/locales/global/de';
-
-declare module '@angular/common/locales/global/fr';
-
 interface NodeModule {
   id: string;
 }

templates/webpack/webpack.custom.ts

@@ -140,16 +140,6 @@ export default (
             return locale.replace('_', '-');
           }
 
-          // move Angular locale data into bundle with translations
-          const localeDataMatch = /[\\/]@angular[\\/]common[\\/]locales[\\/]global[\\/](.*?)\.js/.exec(identifier);
-          let localeData = localeDataMatch && localeDataMatch[1];
-          if (localeData) {
-            if (!localeData.includes('-')) {
-              localeData += '-' + localeData.toUpperCase();
-            }
-            return localeData;
-          }
-
           const match = /[\\/](extensions|projects)[\\/](.*?)[\\/](src[\\/]app[\\/])?(.*)/.exec(identifier);
           const feature = match && match[2];