feat(core): add default option to localization

npm/ng-packs/packages/core/src/lib/models/config.ts

@@ -30,4 +30,9 @@ export namespace Config {
   export interface Requirements {
     layouts: Type<any>[];
   }
+
+  export interface LocalizationWithDefault {
+    key: string;
+    defaultValue: string;
+  }
 }

npm/ng-packs/packages/core/src/lib/states/config.state.ts

@@ -115,8 +115,7 @@ export class ConfigState {
 
   /**
    *
-   * @param deprecated, Use getLocalization instead. To be delete in v1
-   *
+   * @deprecated, Use getLocalization instead. To be delete in v1
    */
   static getCopy(key: string, ...interpolateParams: string[]) {
     if (!key) key = '';
@@ -166,14 +165,21 @@ export class ConfigState {
     return selector;
   }
 
-  static getLocalization(key: string, ...interpolateParams: string[]) {
+  static getLocalization(key: string | Config.LocalizationWithDefault, ...interpolateParams: string[]) {
+    let defaultValue: string;
+
+    if (typeof key !== 'string') {
+      defaultValue = key.defaultValue;
+      key = key.key;
+    }
+
     if (!key) key = '';
 
     const keys = key.split('::') as string[];
     const selector = createSelector(
       [ConfigState],
       (state: Config.State) => {
-        if (!state.localization) return key;
+        if (!state.localization) return defaultValue || key;
 
         const { defaultResourceName } = state.environment.localization;
         if (keys[0] === '') {
@@ -207,7 +213,7 @@ export class ConfigState {
           });
         }
 
-        return localization || key;
+        return localization || defaultValue || key;
       },
     );
 

npm/ng-packs/packages/theme-shared/src/lib/components/error/error.component.html

@@ -1,5 +1,5 @@
 <div class="error">
-  <button id="abp-close-button mr-4" type="button" class="close" (click)="destroy()">
+  <button id="abp-close-button mr-3" type="button" class="close" (click)="destroy()">
     <span aria-hidden="true">&times;</span>
   </button>
   <div class="row centered">
@@ -13,7 +13,8 @@
         </div>
         <div class="error-actions">
           <a (click)="destroy()" routerLink="/" class="btn btn-primary btn-md mt-2"
-            ><span class="glyphicon glyphicon-home"></span> {{ '::Menu:Home' | abpLocalization }}
+            ><span class="glyphicon glyphicon-home"></span>
+            {{ { key: '::Menu:Home', defaultValue: 'Home' } | abpLocalization }}
           </a>
         </div>
       </div>

npm/ng-packs/packages/theme-shared/src/lib/components/error/error.component.ts

@@ -1,14 +1,15 @@
 import { Component, Renderer2, ElementRef } from '@angular/core';
+import { Config } from '@abp/ng.core';
 
 @Component({
   selector: 'abp-error',
   templateUrl: './error.component.html',
-  styleUrls: ['error.component.scss']
+  styleUrls: ['error.component.scss'],
 })
 export class ErrorComponent {
-  title = 'Oops!';
+  title: string | Config.LocalizationWithDefault = 'Oops!';
 
-  details = 'Sorry, an error has occured.';
+  details: string | Config.LocalizationWithDefault = 'Sorry, an error has occured.';
 
   renderer: Renderer2;
 

npm/ng-packs/packages/theme-shared/src/lib/handlers/error.handler.ts

@@ -36,11 +36,11 @@ export const DEFAULT_ERROR_MESSAGES = {
   },
   defaultError500: {
     title: '500',
-    details: 'AbpAccount::InternalServerErrorMessage',
+    details: { key: 'AbpAccount::InternalServerErrorMessage', defaultValue: 'Error detail not sent by server.' },
   },
   defaultErrorUnknown: {
     title: 'Unknown Error',
-    details: 'AbpAccount::InternalServerErrorMessage',
+    details: { key: 'AbpAccount::InternalServerErrorMessage', defaultValue: 'Error detail not sent by server.' },
   },
 };