fix(theme-shared): breadcrumb type error

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

@@ -26,12 +26,9 @@ export class ConfigState {
   }
 
   static getOne(key: string) {
-    const selector = createSelector(
-      [ConfigState],
-      (state: Config.State) => {
-        return state[key];
-      },
-    );
+    const selector = createSelector([ConfigState], (state: Config.State) => {
+      return state[key];
+    });
 
     return selector;
   }
@@ -45,87 +42,71 @@ export class ConfigState {
       throw new Error('The argument must be a dot string or an string array.');
     }
 
-    const selector = createSelector(
-      [ConfigState],
-      (state: Config.State) => {
-        return (keys as string[]).reduce((acc, val) => {
-          if (acc) {
-            return acc[val];
-          }
-
-          return undefined;
-        }, state);
-      },
-    );
+    const selector = createSelector([ConfigState], (state: Config.State) => {
+      return (keys as string[]).reduce((acc, val) => {
+        if (acc) {
+          return acc[val];
+        }
+
+        return undefined;
+      }, state);
+    });
 
     return selector;
   }
 
-  static getRoute(path?: string, name?: string) {
-    const selector = createSelector(
-      [ConfigState],
-      (state: Config.State) => {
-        const { flattedRoutes } = state;
-        return (flattedRoutes as ABP.FullRoute[]).find(route => {
-          if (path && route.path === path) {
-            return route;
-          } else if (name && route.name === name) {
-            return route;
-          }
-        });
-      },
-    );
+  static getRoute(path?: string, name?: string, url?: string) {
+    const selector = createSelector([ConfigState], (state: Config.State) => {
+      const { flattedRoutes } = state;
+      return (flattedRoutes as ABP.FullRoute[]).find(route => {
+        if (path && route.path === path) {
+          return route;
+        } else if (name && route.name === name) {
+          return route;
+        } else if (url && route.url === url) {
+          return route;
+        }
+      });
+    });
 
     return selector;
   }
 
   static getApiUrl(key?: string) {
-    const selector = createSelector(
-      [ConfigState],
-      (state: Config.State): string => {
-        return state.environment.apis[key || 'default'].url;
-      },
-    );
+    const selector = createSelector([ConfigState], (state: Config.State): string => {
+      return state.environment.apis[key || 'default'].url;
+    });
 
     return selector;
   }
 
   static getSetting(key: string) {
-    const selector = createSelector(
-      [ConfigState],
-      (state: Config.State) => {
-        return snq(() => state.setting.values[key]);
-      },
-    );
+    const selector = createSelector([ConfigState], (state: Config.State) => {
+      return snq(() => state.setting.values[key]);
+    });
     return selector;
   }
 
   static getSettings(keyword?: string) {
-    const selector = createSelector(
-      [ConfigState],
-      (state: Config.State) => {
-        if (keyword) {
-          const keys = snq(() => Object.keys(state.setting.values).filter(key => key.indexOf(keyword) > -1), []);
-
-          if (keys.length) {
-            return keys.reduce((acc, key) => ({ ...acc, [key]: state.setting.values[key] }), {});
-          }
+    const selector = createSelector([ConfigState], (state: Config.State) => {
+      if (keyword) {
+        const keys = snq(() => Object.keys(state.setting.values).filter(key => key.indexOf(keyword) > -1), []);
+
+        if (keys.length) {
+          return keys.reduce((acc, key) => ({ ...acc, [key]: state.setting.values[key] }), {});
         }
+      }
 
-        return snq(() => state.setting.values, {});
-      },
-    );
+      return snq(() => state.setting.values, {});
+    });
     return selector;
   }
 
   static getGrantedPolicy(key: string) {
-    const selector = createSelector(
-      [ConfigState],
-      (state: Config.State): boolean => {
-        if (!key) return true;
-        return snq(() => state.auth.grantedPolicies[key], false);
-      },
-    );
+    const selector = createSelector([ConfigState], (state: Config.State): boolean => {
+      if (!key) return true;
+      return snq(() => state.auth.grantedPolicies[key], false);
+    });
 
     return selector;
   }
@@ -141,47 +122,44 @@ export class ConfigState {
     if (!key) key = '';
 
     const keys = key.split('::') as string[];
-    const selector = createSelector(
-      [ConfigState],
-      (state: Config.State) => {
-        if (!state.localization) return defaultValue || key;
-
-        const { defaultResourceName } = state.environment.localization;
-        if (keys[0] === '') {
-          if (!defaultResourceName) {
-            throw new Error(
-              `Please check your environment. May you forget set defaultResourceName?
+    const selector = createSelector([ConfigState], (state: Config.State) => {
+      if (!state.localization) return defaultValue || key;
+
+      const { defaultResourceName } = state.environment.localization;
+      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] = snq(() => defaultResourceName);
+          );
         }
 
-        let localization = (keys as any).reduce((acc, val) => {
-          if (acc) {
-            return acc[val];
-          }
-
-          return undefined;
-        }, state.localization.values);
+        keys[0] = snq(() => defaultResourceName);
+      }
 
-        interpolateParams = interpolateParams.filter(params => params != null);
-        if (localization && interpolateParams && interpolateParams.length) {
-          interpolateParams.forEach(param => {
-            localization = localization.replace(/[\'\"]?\{[\d]+\}[\'\"]?/, param);
-          });
+      let localization = (keys as any).reduce((acc, val) => {
+        if (acc) {
+          return acc[val];
         }
 
-        if (typeof localization !== 'string') localization = '';
-        return localization || defaultValue || key;
-      },
-    );
+        return undefined;
+      }, state.localization.values);
+
+      interpolateParams = interpolateParams.filter(params => params != null);
+      if (localization && interpolateParams && interpolateParams.length) {
+        interpolateParams.forEach(param => {
+          localization = localization.replace(/[\'\"]?\{[\d]+\}[\'\"]?/, param);
+        });
+      }
+
+      if (typeof localization !== 'string') localization = '';
+      return localization || defaultValue || key;
+    });
 
     return selector;
   }

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

@@ -16,21 +16,30 @@ export class BreadcrumbComponent implements OnInit {
 
   ngOnInit(): void {
     this.show = !!this.store.selectSnapshot(state => state.LeptonLayoutState);
+    if (this.show) {
+      const splittedUrl = this.router.url.split('/').filter(chunk => chunk);
 
-    const splittedUrl = this.router.url.split('/').filter(chunk => chunk);
+      const currentUrl: ABP.FullRoute =
+        this.store.selectSnapshot(ConfigState.getRoute(splittedUrl[0])) ||
+        this.store.selectSnapshot(ConfigState.getRoute(null, null, this.router.url));
 
-    const currentUrl: ABP.FullRoute = this.store.selectSnapshot(ConfigState.getRoute(splittedUrl[0]));
-    this.segments.push(currentUrl.name);
+      if (!currentUrl) {
+        this.show = false;
+        return;
+      }
+
+      this.segments.push(currentUrl.name);
 
-    if (splittedUrl.length > 1) {
-      const [, ...arr] = splittedUrl;
+      if (splittedUrl.length > 1) {
+        const [, ...arr] = splittedUrl;
 
-      let childRoute: ABP.FullRoute = currentUrl;
-      for (let i = 0; i < arr.length; i++) {
-        const element = arr[i];
-        childRoute = childRoute.children.find(child => child.path === element);
+        let childRoute: ABP.FullRoute = currentUrl;
+        for (let i = 0; i < arr.length; i++) {
+          const element = arr[i];
+          childRoute = childRoute.children.find(child => child.path === element);
 
-        this.segments.push(childRoute.name);
+          this.segments.push(childRoute.name);
+        }
       }
     }
   }

npm/ng-packs/packages/theme-shared/src/lib/tests/breadcrumb.component.spec.ts

@@ -46,4 +46,19 @@ describe('BreadcrumbComponent', () => {
     expect(elements[1]).toHaveText('Identity');
     expect(elements[2]).toHaveText('Users');
   });
+
+  it('should not display the breadcrumb', () => {
+    const router = spectator.get(Router);
+    (router as any).url = '/identity/users';
+    spectator.detectChanges();
+    expect(spectator.query('ol.breadcrumb')).toBeFalsy();
+  });
+
+  it('should not display the breadcrumb when abp route not found', () => {
+    const router = spectator.get(Router);
+    (router as any).url = '/identity/users';
+    store.selectSnapshot.mockReturnValueOnce({ LeptonLayoutState: {} });
+    spectator.detectChanges();
+    expect(spectator.query('ol.breadcrumb')).toBeFalsy();
+  });
 });