Merge pull request #3936 from abpframework/refactor/localization

Localization enhancements for Angular UI

npm/ng-packs/apps/dev-app/src/environments/environment.prod.ts

@@ -19,7 +19,4 @@ export const environment = {
       url: 'https://localhost:44305',
     },
   },
-  localization: {
-    defaultResourceName: 'MyProjectName',
-  },
 };

npm/ng-packs/apps/dev-app/src/environments/environment.ts

@@ -19,7 +19,4 @@ export const environment = {
       url: 'https://localhost:44305',
     },
   },
-  localization: {
-    defaultResourceName: 'MyProjectName',
-  },
 };

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

@@ -16,7 +16,7 @@ export namespace Config {
     hmr?: boolean;
     oAuthConfig: AuthConfig;
     apis: Apis;
-    localization: { defaultResourceName: string };
+    localization?: { defaultResourceName?: string };
   }
 
   export interface Application {

npm/ng-packs/packages/core/src/lib/services/localization.service.ts

@@ -1,11 +1,12 @@
 import { Injectable, NgZone, Optional, SkipSelf } from '@angular/core';
 import { ActivatedRouteSnapshot, Router } from '@angular/router';
-import { Store, Actions, ofActionSuccessful } from '@ngxs/store';
+import { Actions, ofActionSuccessful, Store } from '@ngxs/store';
 import { noop, Observable } from 'rxjs';
+import { SetLanguage } from '../actions/session.actions';
+import { ApplicationConfiguration } from '../models/application-configuration';
+import { Config } from '../models/config';
 import { ConfigState } from '../states/config.state';
 import { registerLocale } from '../utils/initial-utils';
-import { Config } from '../models/config';
-import { SetLanguage } from '../actions/session.actions';
 
 type ShouldReuseRoute = (future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot) => boolean;
 
@@ -75,4 +76,31 @@ export class LocalizationService {
   instant(key: string | Config.LocalizationWithDefault, ...interpolateParams: string[]): string {
     return this.store.selectSnapshot(ConfigState.getLocalization(key, ...interpolateParams));
   }
+
+  isLocalized(key, sourceName) {
+    if (sourceName === '_') {
+      // A convention to suppress the localization
+      return true;
+    }
+
+    const localization = this.store.selectSnapshot(
+      ConfigState.getOne('localization'),
+    ) as ApplicationConfiguration.Localization;
+    sourceName = sourceName || localization.defaultResourceName;
+    if (!sourceName) {
+      return false;
+    }
+
+    const source = localization.values[sourceName];
+    if (!source) {
+      return false;
+    }
+
+    const value = source[key];
+    if (value === undefined) {
+      return false;
+    }
+
+    return true;
+  }
 }

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

@@ -155,33 +155,45 @@ export class ConfigState {
     }
 
     const keys = key.split('::') as string[];
-    const selector = createSelector([ConfigState], (state: Config.State) => {
+    const selector = createSelector([ConfigState], (state: Config.State): string => {
-      if (!state.localization) return defaultValue || key;
+      const warn = (message: string) => {
-
+        if (!state.environment.production) console.warn(message);
-      const defaultResourceName = snq(() => state.environment.localization.defaultResourceName);
+      };
-      if (keys[0] === '') {
-        if (!defaultResourceName) {
-          throw new Error(
-            `Please check your environment. May you forget set defaultResourceName?
-              Here is the example:
-               { production: false,
-                 localization: {
-                   defaultResourceName: 'MyProjectName'
-                  }
-               }`,
-          );
-        }
 
-        keys[0] = defaultResourceName;
+      if (keys.length < 2) {
+        warn('The localization source separator (::) not found.');
+        return defaultValue || (key as string);
       }
+      if (!state.localization) return defaultValue || keys[1];
 
-      let localization = (keys as any).reduce((acc, val) => {
+      const sourceName =
-        if (acc) {
+        keys[0] ||
-          return acc[val];
+        snq(() => state.environment.localization.defaultResourceName) ||
-        }
+        state.localization.defaultResourceName;
+      const sourceKey = keys[1];
 
-        return undefined;
+      if (sourceName === '_') {
-      }, state.localization.values);
+        return defaultValue || sourceKey;
+      }
+
+      if (!sourceName) {
+        warn(
+          'Localization source name is not specified and the defaultResourceName was not defined!',
+        );
+
+        return defaultValue || sourceKey;
+      }
+
+      const source = state.localization.values[sourceName];
+      if (!source) {
+        warn('Could not find localization source: ' + sourceName);
+        return defaultValue || sourceKey;
+      }
+
+      let localization = source[sourceKey];
+      if (typeof localization === 'undefined') {
+        return defaultValue || sourceKey;
+      }
 
       interpolateParams = interpolateParams.filter(params => params != null);
       if (localization && interpolateParams && interpolateParams.length) {
@@ -191,7 +203,7 @@ export class ConfigState {
       }
 
       if (typeof localization !== 'string') localization = '';
-      return localization || defaultValue || key;
+      return localization || defaultValue || (key as string);
     });
 
     return selector;

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

@@ -272,7 +272,7 @@ describe('ConfigState', () => {
       );
 
       expect(ConfigState.getLocalization('AbpIdentity::NoIdentity')(CONFIG_STATE_DATA)).toBe(
-        'AbpIdentity::NoIdentity',
+        'NoIdentity',
       );
 
       expect(
@@ -287,18 +287,15 @@ describe('ConfigState', () => {
         )(CONFIG_STATE_DATA),
       ).toBe('first and second do not match.');
 
-      try {
+      expect(
         ConfigState.getLocalization('::Test')({
           ...CONFIG_STATE_DATA,
           environment: {
             ...CONFIG_STATE_DATA.environment,
             localization: {} as any,
           },
-        });
+        }),
-        expect(false).toBeTruthy(); // fail
+      ).toBe('Test');
-      } catch (error) {
-        expect((error as Error).message).toContain('Please check your environment');
-      }
     });
   });
 

npm/ng-packs/packages/core/src/lib/tests/localization.service.spec.ts

@@ -44,13 +44,7 @@ describe('LocalizationService', () => {
 
   describe('#instant', () => {
     it('should be return a localization', () => {
-      store.selectSnapshot.andCallFake(
+      store.selectSnapshot.andReturn('AbpTest');
-        (selector: (state: any, ...states: any[]) => Observable<string>) => {
-          return selector({
-            ConfigState: { getLocalization: (keys, ...interpolateParams) => keys },
-          });
-        },
-      );
 
       expect(service.instant('AbpTest')).toBe('AbpTest');
     });

templates/app/angular/src/environments/environment.prod.ts

@@ -2,7 +2,7 @@ export const environment = {
   production: true,
   application: {
     name: 'MyProjectName',
-    logoUrl: ''
+    logoUrl: '',
   },
   oAuthConfig: {
     issuer: 'https://localhost:44305',
@@ -11,14 +11,11 @@ export const environment = {
     scope: 'MyProjectName',
     showDebugInformation: true,
     oidc: false,
-    requireHttps: true
+    requireHttps: true,
   },
   apis: {
     default: {
-      url: 'https://localhost:44305'
+      url: 'https://localhost:44305',
-    }
+    },
   },
-  localization: {
-    defaultResourceName: 'MyProjectName'
-  }
 };

templates/app/angular/src/environments/environment.ts

@@ -2,7 +2,7 @@ export const environment = {
   production: false,
   application: {
     name: 'MyProjectName',
-    logoUrl: ''
+    logoUrl: '',
   },
   oAuthConfig: {
     issuer: 'https://localhost:44305',
@@ -11,14 +11,11 @@ export const environment = {
     scope: 'MyProjectName',
     showDebugInformation: true,
     oidc: false,
-    requireHttps: true
+    requireHttps: true,
   },
   apis: {
     default: {
-      url: 'https://localhost:44305'
+      url: 'https://localhost:44305',
-    }
+    },
   },
-  localization: {
-    defaultResourceName: 'MyProjectName'
-  }
 };

templates/module/angular/src/environments/environment.prod.ts

@@ -18,7 +18,4 @@ export const environment = {
       url: 'https://localhost:44300',
     },
   },
-  localization: {
-    defaultResourceName: 'MyProjectName',
-  },
 };

templates/module/angular/src/environments/environment.ts

@@ -18,7 +18,4 @@ export const environment = {
       url: 'https://localhost:44300',
     },
   },
-  localization: {
-    defaultResourceName: 'MyProjectName',
-  },
 };