diff --git a/packages/admin-ui/src/lib/core/src/common/version.ts b/packages/admin-ui/src/lib/core/src/common/version.ts index 47d1a9909a..c394cec729 100644 --- a/packages/admin-ui/src/lib/core/src/common/version.ts +++ b/packages/admin-ui/src/lib/core/src/common/version.ts @@ -1,2 +1,2 @@ // Auto-generated by the set-version.js script. -export const ADMIN_UI_VERSION = '0.10.0'; +export const ADMIN_UI_VERSION = '0.10.1'; diff --git a/packages/admin-ui/src/lib/core/src/components/ui-language-switcher-dialog/ui-language-switcher-dialog.component.html b/packages/admin-ui/src/lib/core/src/components/ui-language-switcher-dialog/ui-language-switcher-dialog.component.html index 9b043d1d9e..bcd31dd563 100644 --- a/packages/admin-ui/src/lib/core/src/components/ui-language-switcher-dialog/ui-language-switcher-dialog.component.html +++ b/packages/admin-ui/src/lib/core/src/components/ui-language-switcher-dialog/ui-language-switcher-dialog.component.html @@ -1,6 +1,8 @@ {{ 'common.select-display-language' | translate }} - +
+ +
diff --git a/packages/admin-ui/src/lib/core/src/core.module.ts b/packages/admin-ui/src/lib/core/src/core.module.ts index 132d147507..cfda0367d7 100644 --- a/packages/admin-ui/src/lib/core/src/core.module.ts +++ b/packages/admin-ui/src/lib/core/src/core.module.ts @@ -4,6 +4,7 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { TranslateCompiler, TranslateLoader, TranslateModule } from '@ngx-translate/core'; +import { MESSAGE_FORMAT_CONFIG, MessageFormatConfig } from 'ngx-translate-messageformat-compiler'; import { getAppConfig } from './app.config'; import { getDefaultLanguage } from './common/utilities/get-default-language'; @@ -38,6 +39,7 @@ import { SharedModule } from './shared/shared.module'; compiler: { provide: TranslateCompiler, useClass: InjectableTranslateMessageFormatCompiler }, }), ], + providers: [{ provide: MESSAGE_FORMAT_CONFIG, useFactory: getLocales }], exports: [SharedModule, OverlayHostComponent], declarations: [ AppShellComponent, @@ -81,3 +83,20 @@ export function HttpLoaderFactory(http: HttpClient, location: PlatformLocation) const baseHref = location.getBaseHrefFromDOM(); return new CustomHttpTranslationLoader(http, baseHref + 'i18n-messages/'); } + +/** + * Returns the locales defined in the vendure-ui-config.json, ensuring that the + * default language is the first item in the array as per the messageformat + * documentation: + * + * > The default locale will be the first entry of the array + * https://messageformat.github.io/messageformat/MessageFormat + */ +export function getLocales(): MessageFormatConfig { + const locales = getAppConfig().availableLanguages; + const defaultLanguage = getDefaultLanguage(); + const localesWithoutDefault = locales.filter(l => l !== defaultLanguage); + return { + locales: [defaultLanguage, ...localesWithoutDefault], + }; +} diff --git a/packages/admin-ui/src/lib/core/src/providers/i18n/custom-message-format-compiler.ts b/packages/admin-ui/src/lib/core/src/providers/i18n/custom-message-format-compiler.ts index 24a5888ac4..6f2c36a1b0 100644 --- a/packages/admin-ui/src/lib/core/src/providers/i18n/custom-message-format-compiler.ts +++ b/packages/admin-ui/src/lib/core/src/providers/i18n/custom-message-format-compiler.ts @@ -1,9 +1,29 @@ +/* tslint:disable:no-console */ import { Injectable } from '@angular/core'; -import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler'; +import { + TranslateMessageFormatCompiler, + TranslateMessageFormatDebugCompiler, +} from 'ngx-translate-messageformat-compiler'; /** * Work-around for Angular 9 compat. * See https://github.com/lephyrus/ngx-translate-messageformat-compiler/issues/53#issuecomment-583677994 + * + * Also logs errors which would otherwise get swallowed by ngx-translate. This is important + * because it is quite easy to make errors in messageformat syntax, and without clear + * error messages it's very hard to debug. */ @Injectable({ providedIn: 'root' }) -export class InjectableTranslateMessageFormatCompiler extends TranslateMessageFormatCompiler {} +export class InjectableTranslateMessageFormatCompiler extends TranslateMessageFormatCompiler { + compileTranslations(value: any, lang: string): any { + try { + return super.compileTranslations(value, lang); + } catch (e) { + console.error(`There was an error with the ${lang} translations:`); + console.log(e); + console.log( + `Check the messageformat docs: https://messageformat.github.io/messageformat/page-guide`, + ); + } + } +}