Angular UI: Updated all dependency versions to the latest

npm/ng-packs/.vscode/launch.json

@@ -0,0 +1,13 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+          "type": "node",
+          "request": "launch",
+          "name": "Debug schematics",
+          "runtimeExecutable": "yarn",
+          "runtimeArgs": ["ng", "g", "./packages/schematics/src/collection.json:proxy-add", "--debug=true"],
+          "console": "integratedTerminal"
+        }
+      ]
+}

npm/ng-packs/package.json

@@ -63,11 +63,10 @@
     "@angular/core": "~12.2.0",
     "@angular/forms": "~12.2.0",
     "@angular/language-service": "^12.2.0",
-    "@angular/localize": "~12.2.0",
     "@angular/platform-browser": "~12.2.0",
     "@angular/platform-browser-dynamic": "~12.2.0",
     "@angular/router": "~12.2.0",
-    "@fortawesome/fontawesome-free": "^5.14.0",
+    "@fortawesome/fontawesome-free": "^5.15.4",
     "@ng-bootstrap/ng-bootstrap": "^7.0.0",
     "@ngneat/spectator": "^8.0.3",
     "@ngx-validate/core": "^0.0.13",
@@ -81,12 +80,12 @@
     "@nrwl/tao": "12.6.5",
     "@nrwl/workspace": "12.6.5",
     "@schematics/angular": "~12.2.0",
-    "@swimlane/ngx-datatable": "^17.1.0",
+    "@swimlane/ngx-datatable": "^19.0.0",
     "@types/jest": "26.0.24",
     "@types/node": "14.14.33",
     "@typescript-eslint/eslint-plugin": "~4.28.3",
     "@typescript-eslint/parser": "~4.28.3",
-    "angular-oauth2-oidc": "^12.0.2",
+    "angular-oauth2-oidc": "^12.1.0",
     "bootstrap": "^4.5.0",
     "chart.js": "^2.9.3",
     "cypress": "^7.3.0",
@@ -99,17 +98,16 @@
     "jest-canvas-mock": "^2.3.1",
     "jest-preset-angular": "9.0.4",
     "jsonc-parser": "^2.3.0",
-    "just-clone": "^3.1.0",
-    "just-compare": "^1.3.0",
-    "lerna": "^3.19.0",
+    "just-clone": "^3.2.1",
+    "just-compare": "^1.4.0",
+    "lerna": "^4.0.0",
     "ng-packagr": "^12.2.0",
-    "ng-zorro-antd": "^11.0.1",
+    "ng-zorro-antd": "^12.0.1",
     "ngxs-schematic": "^1.1.9",
     "prettier": "^2.3.1",
     "protractor": "~7.0.0",
     "rxjs": "~6.6.0",
     "should-quote": "^1.0.0",
-    "snq": "^1.0.3",
     "ts-jest": "27.0.3",
     "ts-node": "~9.1.1",
     "ts-toolbelt": "6.15.4",

npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.ts

@@ -1,10 +1,9 @@
-import { Profile, ProfileService } from '@abp/ng.core';
+import { ProfileService } from '@abp/ng.core';
 import { getPasswordValidators, ToasterService } from '@abp/ng.theme.shared';
-import { Component, Injector, Input, OnInit } from '@angular/core';
+import { Component, Injector, OnInit } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { comparePasswords, Validation } from '@ngx-validate/core';
 import { finalize } from 'rxjs/operators';
-import snq from 'snq';
 import { Account } from '../../models/account';
 import { ManageProfileStateService } from '../../services/manage-profile.state.service';
 
@@ -91,9 +90,7 @@ export class ChangePasswordComponent
           }
         },
         error: err => {
-          this.toasterService.error(
-            snq(() => err.error.error.message, 'AbpAccount::DefaultErrorMessage'),
-          );
+          this.toasterService.error(err.error?.error?.message || 'AbpAccount::DefaultErrorMessage');
         },
       });
   }

npm/ng-packs/packages/account/src/lib/components/login/login.component.ts

@@ -1,11 +1,9 @@
-import { ConfigStateService, AuthService } from '@abp/ng.core';
+import { AuthService, ConfigStateService } from '@abp/ng.core';
 import { ToasterService } from '@abp/ng.theme.shared';
 import { Component, Injector, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { Store } from '@ngxs/store';
 import { throwError } from 'rxjs';
 import { catchError, finalize } from 'rxjs/operators';
-import snq from 'snq';
 import { eAccountComponents } from '../../enums/components';
 import { getRedirectUrl } from '../../utils/auth-utils';
 
@@ -66,9 +64,10 @@ export class LoginComponent implements OnInit {
       .pipe(
         catchError(err => {
           this.toasterService.error(
-            snq(() => err.error.error_description) ||
-              snq(() => err.error.error.message, 'AbpAccount::DefaultErrorMessage'),
-            'Error',
+            err.error?.error_description ||
+              err.error?.error.message ||
+              'AbpAccount::DefaultErrorMessage',
+            null,
             { life: 7000 },
           );
           return throwError(err);

npm/ng-packs/packages/account/src/lib/components/register/register.component.ts

@@ -4,7 +4,6 @@ import { Component, Injector, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { throwError } from 'rxjs';
 import { catchError, finalize, switchMap } from 'rxjs/operators';
-import snq from 'snq';
 import { eAccountComponents } from '../../enums/components';
 import { AccountService } from '../../proxy/account/account.service';
 import { RegisterDto } from '../../proxy/account/models';
@@ -88,11 +87,13 @@ export class RegisterComponent implements OnInit {
         ),
         catchError(err => {
           this.toasterService.error(
-            snq(() => err.error.error_description) ||
-              snq(() => err.error.error.message, 'AbpAccount::DefaultErrorMessage'),
-            'Error',
+            err.error?.error_description ||
+              err.error?.error.message ||
+              'AbpAccount::DefaultErrorMessage',
+            null,
             { life: 7000 },
           );
+
           return throwError(err);
         }),
         finalize(() => (this.inProgress = false)),

npm/ng-packs/packages/components/package.json

@@ -12,7 +12,7 @@
     "@ng-bootstrap/ng-bootstrap": ">=6.0.0"
   },
   "dependencies": {
-    "ng-zorro-antd": "^11.0.0",
+    "ng-zorro-antd": "^12.0.1",
     "tslib": "^2.0.0"
   },
   "publishConfig": {

npm/ng-packs/packages/core/ng-package.json

@@ -6,12 +6,10 @@
   },
   "allowedNonPeerDependencies": [
     "@abp/utils",
-    "@angular/localize",
     "@ngxs/store",
     "angular-oauth2-oidc",
     "just-compare",
     "just-clone",
-    "snq",
     "ts-toolbelt"
   ]
 }

npm/ng-packs/packages/core/package.json

@@ -8,12 +8,10 @@
   },
   "dependencies": {
     "@abp/utils": "^4.4.1",
-    "@angular/localize": "~10.0.10",
     "@ngxs/store": "^3.7.0",
-    "angular-oauth2-oidc": "^10.0.0",
-    "just-clone": "^3.1.0",
-    "just-compare": "^1.3.0",
-    "snq": "^1.0.3",
+    "angular-oauth2-oidc": "^12.1.0",
+    "just-clone": "^3.2.1",
+    "just-compare": "^1.4.0",
     "ts-toolbelt": "6.15.4",
     "tslib": "^2.0.0"
   },

npm/ng-packs/packages/core/src/lib/directives/replaceable-template.directive.ts

@@ -13,7 +13,6 @@ import {
 import compare from 'just-compare';
 import { Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
-import snq from 'snq';
 import { ABP } from '../models/common';
 import { ReplaceableComponents } from '../models/replaceable-components';
 import { ReplaceableComponentsService } from '../services/replaceable-components.service';
@@ -99,7 +98,7 @@ export class ReplaceableTemplateDirective implements OnInit, OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    if (snq(() => changes.data.currentValue.inputs) && this.defaultComponentRef) {
+    if (changes?.data?.currentValue?.inputs && this.defaultComponentRef) {
       this.setDefaultComponentInputs();
     }
   }

npm/ng-packs/packages/core/src/lib/directives/visibility.directive.ts

@@ -1,6 +1,5 @@
 import { AfterViewInit, Directive, ElementRef, Input, Optional, Renderer2 } from '@angular/core';
 import { Subject } from 'rxjs';
-import snq from 'snq';
 
 /**
  *
@@ -26,10 +25,10 @@ export class VisibilityDirective implements AfterViewInit {
       mutations.forEach(mutation => {
         if (!mutation.target) return;
 
-        const htmlNodes = snq(
-          () => Array.from(mutation.target.childNodes).filter(node => node instanceof HTMLElement),
-          [],
-        );
+        const htmlNodes =
+          Array.from(mutation.target.childNodes || []).filter(
+            node => node instanceof HTMLElement,
+          ) || [];
 
         if (!htmlNodes.length) {
           this.removeFromDOM();
@@ -42,11 +41,10 @@ export class VisibilityDirective implements AfterViewInit {
     });
 
     setTimeout(() => {
-      const htmlNodes = snq(
-        () =>
-          Array.from(this.focusedElement.childNodes).filter(node => node instanceof HTMLElement),
-        [],
-      );
+      const htmlNodes =
+        Array.from(this.focusedElement.childNodes || []).filter(
+          node => node instanceof HTMLElement,
+        ) || [];
 
       if (!htmlNodes.length) this.removeFromDOM();
     }, 0);

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

@@ -1,9 +1,8 @@
 import { Injectable } from '@angular/core';
 import { map } from 'rxjs/operators';
-import snq from 'snq';
+import { ABP } from '../models/common';
 import { ApplicationConfigurationDto } from '../proxy/volo/abp/asp-net-core/mvc/application-configurations/models';
 import { ConfigStateService } from './config-state.service';
-import { ABP } from '../models/common';
 
 @Injectable({ providedIn: 'root' })
 export class PermissionService {
@@ -70,10 +69,10 @@ export class PermissionService {
   }
 
   protected mapToPolicies(applicationConfiguration: ApplicationConfigurationDto) {
-    return snq(() => applicationConfiguration.auth.grantedPolicies, {});
+    return applicationConfiguration?.auth?.grantedPolicies || {};
   }
 
   protected getPolicy(key: string, grantedPolicies: Record<string, boolean>) {
-    return snq(() => grantedPolicies[key], false);
+    return grantedPolicies[key] || false;
   }
 }

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

@@ -4,7 +4,6 @@ import { Action, createSelector, Selector, State, StateContext, Store } from '@n
 import compare from 'just-compare';
 import { throwError } from 'rxjs';
 import { catchError, distinctUntilChanged } from 'rxjs/operators';
-import snq from 'snq';
 import { GetAppConfiguration, PatchConfigState, SetEnvironment } from '../actions/config.actions';
 import { RestOccurError } from '../actions/rest.actions';
 import { Config } from '../models/config';
@@ -76,23 +75,23 @@ export class ConfigState {
 
   static getFeature(key: string) {
     const selector = createSelector([ConfigState], (state: Config.State) => {
-      return snq(() => state.features.values[key]);
+      return state.features.values?.[key];
     });
 
     return selector;
   }
 
   static getSetting(key: string) {
     const selector = createSelector([ConfigState], (state: Config.State) => {
-      return snq(() => state.setting.values[key]);
+      return state.setting.values?.[key];
     });
 
     return selector;
   }
 
   static getSettings(keyword?: string) {
     const selector = createSelector([ConfigState], (state: Config.State) => {
-      const settings = snq(() => state.setting.values, {});
+      const settings = state.setting.values || {};
 
       if (!keyword) return settings;
 
@@ -113,7 +112,7 @@ export class ConfigState {
   static getGrantedPolicy(key: string) {
     const selector = createSelector([ConfigState], (state: Config.State): boolean => {
       if (!key) return true;
-      const getPolicy = (k: string) => snq(() => state.auth.grantedPolicies[k], false);
+      const getPolicy = (k: string) => state.auth.grantedPolicies[k] || false;
 
       const orRegexp = /\|\|/g;
       const andRegexp = /&&/g;
@@ -180,7 +179,7 @@ export class ConfigState {
 
       const sourceName =
         keys[0] ||
-        snq(() => state.environment.localization.defaultResourceName) ||
+        state.environment.localization?.defaultResourceName ||
         state.localization.defaultResourceName;
       const sourceKey = keys[1];
 

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

@@ -1,4 +1,3 @@
-import snq from 'snq';
 import { ApplicationLocalizationConfigurationDto } from '../proxy/volo/abp/asp-net-core/mvc/application-configurations/models';
 
 // This will not be necessary when only Angukar 9.1+ is supported
@@ -14,7 +13,7 @@ export function createLocalizer(localization: ApplicationLocalizationConfigurati
   return (resourceName: string, key: string, defaultValue: string) => {
     if (resourceName === '_') return key;
 
-    const resource = snq(() => localization.values[resourceName]);
+    const resource = localization?.values?.[resourceName];
 
     if (!resource) return defaultValue;
 

npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts

@@ -18,7 +18,6 @@ import { AbstractControl, FormArray, FormBuilder, FormGroup } from '@angular/for
 import { Select, Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
 import { finalize, pluck, switchMap, take } from 'rxjs/operators';
-import snq from 'snq';
 import {
   CreateUser,
   DeleteUser,
@@ -83,7 +82,7 @@ export class UsersComponent implements OnInit {
   };
 
   get roleGroups(): FormGroup[] {
-    return snq(() => (this.form.get('roleNames') as FormArray).controls as FormGroup[], []);
+    return ((this.form.get('roleNames') as FormArray)?.controls as FormGroup[]) || [];
   }
 
   constructor(
@@ -112,7 +111,7 @@ export class UsersComponent implements OnInit {
             this.fb.group({
               [role.name]: [
                 this.selected.id
-                  ? !!snq(() => this.selectedUserRoles.find(userRole => userRole.id === role.id))
+                  ? !!this.selectedUserRoles?.find(userRole => userRole.id === role.id)
                   : role.isDefault,
               ],
             }),
@@ -152,12 +151,10 @@ export class UsersComponent implements OnInit {
     if (!this.form.valid || this.modalBusy) return;
     this.modalBusy = true;
 
-    const { roleNames } = this.form.value;
-    const mappedRoleNames = snq(
-      () =>
-        roleNames.filter(role => !!role[Object.keys(role)[0]]).map(role => Object.keys(role)[0]),
-      [],
-    );
+    const { roleNames = [] } = this.form.value;
+    const mappedRoleNames =
+      roleNames.filter(role => !!role[Object.keys(role)[0]]).map(role => Object.keys(role)[0]) ||
+      [];
 
     this.store
       .dispatch(

npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts

@@ -2,7 +2,6 @@ import { ConfigStateService, LanguageInfo, SessionStateService } from '@abp/ng.c
 import { Component } from '@angular/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import snq from 'snq';
 
 @Component({
   selector: 'abp-languages',
@@ -53,20 +52,15 @@ export class LanguagesComponent {
     return this.languages$.pipe(
       map(
         languages =>
-          snq(
-            () => languages.find(lang => lang.cultureName === this.selectedLangCulture).displayName,
-          ),
-        '',
+          languages?.find(lang => lang.cultureName === this.selectedLangCulture).displayName || '',
       ),
     );
   }
 
   get dropdownLanguages$(): Observable<LanguageInfo[]> {
     return this.languages$.pipe(
       map(
-        languages =>
-          snq(() => languages.filter(lang => lang.cultureName !== this.selectedLangCulture)),
-        [],
+        languages => languages?.filter(lang => lang.cultureName !== this.selectedLangCulture) || [],
       ),
     );
   }