feat: updated Angular versions of Angular UI app template to v9

npm/ng-packs/angular.json

@@ -56,7 +56,10 @@
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": ["packages/theme-shared/tsconfig.lib.json", "packages/theme-shared/tsconfig.spec.json"],
+            "tsConfig": [
+              "packages/theme-shared/tsconfig.lib.json",
+              "packages/theme-shared/tsconfig.spec.json"
+            ],
             "exclude": ["**/node_modules/**"]
           }
         }
@@ -86,7 +89,10 @@
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": ["packages/theme-basic/tsconfig.lib.json", "packages/theme-basic/tsconfig.spec.json"],
+            "tsConfig": [
+              "packages/theme-basic/tsconfig.lib.json",
+              "packages/theme-basic/tsconfig.spec.json"
+            ],
             "exclude": ["**/node_modules/**"]
           }
         }
@@ -115,7 +121,10 @@
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": ["packages/account/tsconfig.lib.json", "packages/account/tsconfig.spec.json"],
+            "tsConfig": [
+              "packages/account/tsconfig.lib.json",
+              "packages/account/tsconfig.spec.json"
+            ],
             "exclude": ["**/node_modules/**"]
           }
         }
@@ -176,7 +185,10 @@
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": ["packages/identity/tsconfig.lib.json", "packages/identity/tsconfig.spec.json"],
+            "tsConfig": [
+              "packages/identity/tsconfig.lib.json",
+              "packages/identity/tsconfig.spec.json"
+            ],
             "exclude": ["**/node_modules/**"]
           }
         }
@@ -333,7 +345,10 @@
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": ["packages/identity-config/tsconfig.lib.json", "packages/identity-config/tsconfig.spec.json"],
+            "tsConfig": [
+              "packages/identity-config/tsconfig.lib.json",
+              "packages/identity-config/tsconfig.spec.json"
+            ],
             "exclude": ["**/node_modules/**"]
           }
         }
@@ -362,7 +377,10 @@
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": ["packages/account-config/tsconfig.lib.json", "packages/account-config/tsconfig.spec.json"],
+            "tsConfig": [
+              "packages/account-config/tsconfig.lib.json",
+              "packages/account-config/tsconfig.spec.json"
+            ],
             "exclude": ["**/node_modules/**"]
           }
         }
@@ -434,21 +452,6 @@
                 "input": "node_modules/@fortawesome/fontawesome-free/css/v4-shims.min.css",
                 "lazy": true,
                 "bundleName": "fontawesome-v4-shims.min"
-              },
-              {
-                "input": "node_modules/primeng/resources/themes/nova-light/theme.css",
-                "lazy": true,
-                "bundleName": "primeng-nova-light-theme"
-              },
-              {
-                "input": "node_modules/primeicons/primeicons.css",
-                "lazy": true,
-                "bundleName": "primeicons"
-              },
-              {
-                "input": "node_modules/primeng/resources/primeng.min.css",
-                "lazy": true,
-                "bundleName": "primeng.min"
               }
             ],
             "scripts": []

npm/ng-packs/apps/dev-app/src/app/app.component.ts

@@ -14,13 +14,7 @@ export class AppComponent implements OnInit {
   ngOnInit() {
     this.lazyLoadService
       .load(
-        [
-          'primeng.min.css',
-          'primeicons.css',
-          'primeng-nova-light-theme.css',
-          'fontawesome-all.min.css',
-          'fontawesome-v4-shims.min.css',
-        ],
+        ['fontawesome-all.min.css', 'fontawesome-v4-shims.min.css'],
         'style',
         null,
         'head',

npm/ng-packs/package.json

@@ -21,48 +21,48 @@
     "generate:changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
   },
   "devDependencies": {
-    "@abp/ng.account": "^2.0.1",
-    "@abp/ng.account.config": "^2.0.1",
-    "@abp/ng.core": "^2.0.1",
-    "@abp/ng.feature-management": "^2.0.1",
-    "@abp/ng.identity": "^2.0.1",
-    "@abp/ng.identity.config": "^2.0.1",
-    "@abp/ng.permission-management": "^2.0.1",
-    "@abp/ng.setting-management": "^2.0.1",
-    "@abp/ng.setting-management.config": "^2.0.1",
-    "@abp/ng.tenant-management": "^2.0.1",
-    "@abp/ng.tenant-management.config": "^2.0.1",
-    "@abp/ng.theme.basic": "^2.0.1",
-    "@abp/ng.theme.shared": "^2.0.1",
+    "@abp/ng.account": "^2.1.0",
+    "@abp/ng.account.config": "^2.1.0",
+    "@abp/ng.core": "^2.1.0",
+    "@abp/ng.feature-management": "^2.1.0",
+    "@abp/ng.identity": "^2.1.0",
+    "@abp/ng.identity.config": "^2.1.0",
+    "@abp/ng.permission-management": "^2.1.0",
+    "@abp/ng.setting-management": "^2.1.0",
+    "@abp/ng.setting-management.config": "^2.1.0",
+    "@abp/ng.tenant-management": "^2.1.0",
+    "@abp/ng.tenant-management.config": "^2.1.0",
+    "@abp/ng.theme.basic": "^2.1.0",
+    "@abp/ng.theme.shared": "^2.1.0",
     "@angular-builders/jest": "^8.2.0",
     "@angular-devkit/build-angular": "~0.803.21",
     "@angular-devkit/build-ng-packagr": "~0.803.21",
     "@angular/animations": "~8.2.14",
-    "@angular/cdk": "^8.2.3",
     "@angular/cli": "~8.3.21",
     "@angular/common": "~8.2.14",
     "@angular/compiler": "~8.2.14",
     "@angular/compiler-cli": "~8.2.14",
     "@angular/core": "~8.2.14",
     "@angular/forms": "~8.2.14",
     "@angular/language-service": "~8.2.14",
+    "@angular/localize": "~9.0.2",
     "@angular/platform-browser": "~8.2.14",
     "@angular/platform-browser-dynamic": "~8.2.14",
     "@angular/router": "~8.2.14",
-    "@fortawesome/fontawesome-free": "^5.11.2",
-    "@ng-bootstrap/ng-bootstrap": "^5.1.4",
+    "@fortawesome/fontawesome-free": "^5.12.1",
+    "@ng-bootstrap/ng-bootstrap": "^5.3.0",
     "@ngneat/spectator": "^4.5.0",
     "@ngx-validate/core": "^0.0.7",
     "@ngxs/devtools-plugin": "^3.5.1",
     "@ngxs/logger-plugin": "^3.5.1",
-    "@ngxs/router-plugin": "^3.5.1",
-    "@ngxs/storage-plugin": "^3.5.1",
-    "@ngxs/store": "^3.5.1",
+    "@ngxs/router-plugin": "^3.6.2",
+    "@ngxs/storage-plugin": "^3.6.2",
+    "@ngxs/store": "^3.6.2",
     "@types/jest": "^24.0.18",
     "@types/node": "~8.9.4",
     "angular-oauth2-oidc": "^8.0.4",
-    "bootstrap": "^4.3.1",
-    "chart.js": "^2.9.2",
+    "bootstrap": "^4.4.1",
+    "chart.js": "^2.9.3",
     "codelyzer": "^5.1.2",
     "conventional-changelog-cli": "^2.0.31",
     "cz-conventional-changelog": "3.0.2",
@@ -78,7 +78,6 @@
     "ngxs-schematic": "^1.1.9",
     "prettier": "^1.18.2",
     "primeicons": "^2.0.0",
-    "primeng": "^8.1.1",
     "protractor": "~5.4.0",
     "rxjs": "~6.4.0",
     "snq": "^1.0.3",

npm/ng-packs/packages/account-config/src/lib/services/account-config.service.ts

@@ -1,12 +1,11 @@
-import { eLayoutType, RestService, addAbpRoutes } from '@abp/ng.core';
+import { addAbpRoutes, eLayoutType } from '@abp/ng.core';
 import { Injectable } from '@angular/core';
-import { Router } from '@angular/router';
 
 @Injectable({
   providedIn: 'root',
 })
 export class AccountConfigService {
-  constructor(private router: Router, private restService: RestService) {
+  constructor() {
     addAbpRoutes({
       name: 'AbpAccount::Menu:Account',
       path: 'account',

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

@@ -24,7 +24,7 @@ export class ChangePasswordComponent
   inProgress: boolean;
 
   mapErrorsFn: Validation.MapErrorsFn = (errors, groupErrors, control) => {
-    if (PASSWORD_FIELDS.indexOf(control.name) < 0) return errors;
+    if (PASSWORD_FIELDS.indexOf(String(control.name)) < 0) return errors;
 
     return errors.concat(groupErrors.filter(({ key }) => key === 'passwordMismatch'));
   };

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

@@ -6,6 +6,7 @@
   },
   "deleteDestPath": false,
   "whitelistedNonPeerDependencies": [
+    "@angular/localize",
     "@ngxs/router-plugin",
     "@ngxs/storage-plugin",
     "@ngxs/store",

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

@@ -7,9 +7,10 @@
     "url": "https://github.com/abpframework/abp.git"
   },
   "dependencies": {
-    "@ngxs/router-plugin": "^3.5.1",
-    "@ngxs/storage-plugin": "^3.5.1",
-    "@ngxs/store": "^3.5.1",
+    "@angular/localize": "~9.0.2",
+    "@ngxs/router-plugin": "^3.6.2",
+    "@ngxs/storage-plugin": "^3.6.2",
+    "@ngxs/store": "^3.6.2",
     "angular-oauth2-oidc": "^8.0.4",
     "just-clone": "3.1.0",
     "just-compare": "^1.3.0",

npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy, Type } from '@angular/core';
+import { Component, Input, OnDestroy, Type, Injector } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router, UrlSegment } from '@angular/router';
 import { Select, Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
@@ -14,8 +14,10 @@ import { takeUntilDestroy } from '../utils/rxjs-utils';
   template: `
     <ng-container *ngTemplateOutlet="layout ? componentOutlet : routerOutlet"></ng-container>
     <ng-template #routerOutlet><router-outlet></router-outlet></ng-template>
-    <ng-template #componentOutlet><ng-container *ngComponentOutlet="layout"></ng-container></ng-template>
-  `
+    <ng-template #componentOutlet
+      ><ng-container *ngComponentOutlet="layout"></ng-container
+    ></ng-template>
+  `,
 })
 export class DynamicLayoutComponent implements OnDestroy {
   @Select(ConfigState.getOne('requirements')) requirements$: Observable<Config.Requirements>;
@@ -25,18 +27,23 @@ export class DynamicLayoutComponent implements OnDestroy {
   constructor(private router: Router, private route: ActivatedRoute, private store: Store) {
     const {
       requirements: { layouts },
-      routes
+      routes,
     } = this.store.selectSnapshot(ConfigState.getAll);
 
     if ((this.route.snapshot.data || {}).layout) {
       this.layout = layouts
         .filter(l => !!l)
-        .find((l: any) => snq(() => l.type.toLowerCase().indexOf(this.route.snapshot.data.layout), -1) > -1);
+        .find(
+          (l: any) =>
+            snq(() => l.type.toLowerCase().indexOf(this.route.snapshot.data.layout), -1) > -1,
+        );
     }
 
-    this.router.events.pipe(takeUntilDestroy(this)).subscribe(event => {
+    router.events.pipe(takeUntilDestroy(this)).subscribe(event => {
       if (event instanceof NavigationEnd) {
-        const { segments } = this.router.parseUrl(event.url).root.children.primary;
+        const segments = snq(() => router.parseUrl(event.url).root.children.primary.segments, [
+          { path: router.url.replace('/', '') },
+        ] as any);
 
         const layout = (this.route.snapshot.data || {}).layout || findLayout(segments, routes);
 

npm/ng-packs/packages/core/src/lib/guards/auth.guard.ts

@@ -1,20 +1,31 @@
-import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { Injectable, Injector } from '@angular/core';
+import {
+  ActivatedRouteSnapshot,
+  CanActivate,
+  Router,
+  RouterStateSnapshot,
+  UrlTree,
+} from '@angular/router';
 import { OAuthService } from 'angular-oauth2-oidc';
 import { Observable } from 'rxjs';
 
 @Injectable({
   providedIn: 'root',
 })
 export class AuthGuard implements CanActivate {
-  constructor(private oauthService: OAuthService, private router: Router) {}
+  constructor(private oauthService: OAuthService, private injector: Injector) {}
+
+  canActivate(
+    _: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot,
+  ): Observable<boolean> | boolean | UrlTree {
+    const router = this.injector.get(Router);
 
-  canActivate(_: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean | UrlTree {
     const hasValidAccessToken = this.oauthService.hasValidAccessToken();
     if (hasValidAccessToken) {
       return hasValidAccessToken;
     }
 
-    return this.router.createUrlTree(['/account/login'], { state: { redirectUrl: state.url } });
+    return router.createUrlTree(['/account/login'], { state: { redirectUrl: state.url } });
   }
 }

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

@@ -14,11 +14,13 @@ import { Config } from '../models/config';
 import { ApplicationConfigurationService } from '../services/application-configuration.service';
 import { organizeRoutes } from '../utils/route-utils';
 import { SessionState } from './session.state';
+import { Injectable } from '@angular/core';
 
 @State<Config.State>({
   name: 'ConfigState',
   defaults: {} as Config.State,
 })
+@Injectable()
 export class ConfigState {
   @Selector()
   static getAll(state: Config.State) {

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

@@ -3,11 +3,13 @@ import { tap } from 'rxjs/operators';
 import { ChangePassword, GetProfile, UpdateProfile } from '../actions/profile.actions';
 import { Profile } from '../models/profile';
 import { ProfileService } from '../services/profile.service';
+import { Injectable } from '@angular/core';
 
 @State<Profile.State>({
   name: 'ProfileState',
   defaults: {} as Profile.State,
 })
+@Injectable()
 export class ProfileState {
   @Selector()
   static getProfile({ profile }: Profile.State): Profile.Response {

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

@@ -2,11 +2,13 @@ import { State, Action, StateContext, Selector, createSelector } from '@ngxs/sto
 import { AddReplaceableComponent } from '../actions/replaceable-components.actions';
 import { ReplaceableComponents } from '../models/replaceable-components';
 import snq from 'snq';
+import { Injectable } from '@angular/core';
 
 @State<ReplaceableComponents.State>({
   name: 'ReplaceableComponentsState',
   defaults: { replaceableComponents: [] } as ReplaceableComponents.State,
 })
+@Injectable()
 export class ReplaceableComponentsState {
   @Selector()
   static getAll({

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

@@ -20,11 +20,13 @@ import {
 import { ABP, Session } from '../models';
 import { LocalizationService } from '../services/localization.service';
 import { OAuthService } from 'angular-oauth2-oidc';
+import { Injectable } from '@angular/core';
 
 @State<Session.State>({
   name: 'SessionState',
   defaults: { sessionDetail: { openedTabCount: 0 } } as Session.State,
 })
+@Injectable()
 export class SessionState {
   @Selector()
   static getLanguage({ language }: Session.State): string {

npm/ng-packs/packages/feature-management/src/lib/states/feature-management.state.ts

@@ -3,11 +3,13 @@ import { tap } from 'rxjs/operators';
 import { GetFeatures, UpdateFeatures } from '../actions/feature-management.actions';
 import { FeatureManagement } from '../models/feature-management';
 import { FeatureManagementService } from '../services/feature-management.service';
+import { Injectable } from '@angular/core';
 
 @State<FeatureManagement.State>({
   name: 'FeatureManagementState',
   defaults: { features: {} } as FeatureManagement.State,
 })
+@Injectable()
 export class FeatureManagementState {
   @Selector()
   static getFeatures({ features }: FeatureManagement.State) {