feat(admin-ui): Better error reporting for invalid translation files

Closes #292

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';

packages/admin-ui/src/lib/core/src/components/ui-language-switcher-dialog/ui-language-switcher-dialog.component.html

@@ -1,6 +1,8 @@
 <ng-template vdrDialogTitle>{{ 'common.select-display-language' | translate }}</ng-template>
 
-<button *ngFor="let code of availableLanguages" class="btn btn-link btn-sm" (click)="setLanguage(code)">
-    <clr-icon [attr.shape]="code === currentLanguage ? 'dot-circle' : 'circle'"></clr-icon>
-    {{ code | uppercase }} ({{ 'lang.' + code | translate }})
-</button>
+<div *ngFor="let code of availableLanguages" >
+    <button class="btn btn-link btn-sm" (click)="setLanguage(code)">
+        <clr-icon [attr.shape]="code === currentLanguage ? 'dot-circle' : 'circle'"></clr-icon>
+        {{ code | uppercase }} ({{ 'lang.' + code | translate }})
+    </button>
+</div>

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

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