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`,
+ );
+ }
+ }
+}