diff --git a/docs/concepts/configuration.md b/docs/concepts/configuration.md index 4d6d343506..688d678098 100644 --- a/docs/concepts/configuration.md +++ b/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 diff --git a/src/app/core/internationalization.module.ts b/src/app/core/internationalization.module.ts index 7058be7e44..74cea3fb3b 100644 --- a/src/app/core/internationalization.module.ts +++ b/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 { - 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(/\-/, '_')); } } diff --git a/src/typings.d.ts b/src/typings.d.ts index 92a390d96c..9741e4164a 100644 --- a/src/typings.d.ts +++ b/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; } diff --git a/templates/webpack/webpack.custom.ts b/templates/webpack/webpack.custom.ts index 42e6abc508..1a04992ddf 100644 --- a/templates/webpack/webpack.custom.ts +++ b/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];