fix: fix some errors caused by Angular 9

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,5 +1,11 @@
-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';
 
@@ -7,14 +13,19 @@ import { Observable } from 'rxjs';
   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) {

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

@@ -1,13 +1,11 @@
-import { addAbpRoutes, eLayoutType, RestService } from '@abp/ng.core';
+import { addAbpRoutes, eLayoutType } from '@abp/ng.core';
 import { Injectable } from '@angular/core';
-import { Router } from '@angular/router';
-import { Observable } from 'rxjs';
 
 @Injectable({
   providedIn: 'root',
 })
 export class IdentityConfigService {
-  constructor(private router: Router, private restService: RestService) {
+  constructor() {
     addAbpRoutes([
       {
         name: 'AbpUiNavigation::Menu:Administration',
@@ -24,8 +22,18 @@ export class IdentityConfigService {
         layout: eLayoutType.application,
         iconClass: 'fa fa-id-card-o',
         children: [
-          { path: 'roles', name: 'AbpIdentity::Roles', order: 1, requiredPolicy: 'AbpIdentity.Roles' },
-          { path: 'users', name: 'AbpIdentity::Users', order: 2, requiredPolicy: 'AbpIdentity.Users' },
+          {
+            path: 'roles',
+            name: 'AbpIdentity::Roles',
+            order: 1,
+            requiredPolicy: 'AbpIdentity.Roles',
+          },
+          {
+            path: 'users',
+            name: 'AbpIdentity::Users',
+            order: 2,
+            requiredPolicy: 'AbpIdentity.Users',
+          },
         ],
       },
     ]);

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

@@ -15,11 +15,13 @@ import {
 } from '../actions/identity.actions';
 import { Identity } from '../models/identity';
 import { IdentityService } from '../services/identity.service';
+import { Injectable } from '@angular/core';
 
 @State<Identity.State>({
   name: 'IdentityState',
   defaults: { roles: {}, selectedRole: {}, users: {}, selectedUser: {} } as Identity.State,
 })
+@Injectable()
 export class IdentityState {
   @Selector()
   static getRoles({ roles }: Identity.State): Identity.RoleItem[] {

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

@@ -3,11 +3,13 @@ import { GetPermissions, UpdatePermissions } from '../actions/permission-managem
 import { PermissionManagement } from '../models/permission-management';
 import { PermissionManagementService } from '../services/permission-management.service';
 import { tap } from 'rxjs/operators';
+import { Injectable } from '@angular/core';
 
 @State<PermissionManagement.State>({
   name: 'PermissionManagementState',
   defaults: { permissionRes: {} } as PermissionManagement.State,
 })
+@Injectable()
 export class PermissionManagementState {
   @Selector()
   static getPermissionGroups({ permissionRes }: PermissionManagement.State) {
@@ -22,7 +24,10 @@ export class PermissionManagementState {
   constructor(private permissionManagementService: PermissionManagementService) {}
 
   @Action(GetPermissions)
-  permissionManagementGet({ patchState }: StateContext<PermissionManagement.State>, { payload }: GetPermissions) {
+  permissionManagementGet(
+    { patchState }: StateContext<PermissionManagement.State>,
+    { payload }: GetPermissions,
+  ) {
     return this.permissionManagementService.getPermissions(payload).pipe(
       tap(permissionResponse =>
         patchState({

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

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, Injector } from '@angular/core';
 import { addAbpRoutes, eLayoutType, PatchRouteByName, ABP } from '@abp/ng.core';
 import { getSettingTabs } from '@abp/ng.theme.shared';
 import { Store } from '@ngxs/store';
@@ -7,7 +7,11 @@ import { Store } from '@ngxs/store';
   providedIn: 'root',
 })
 export class SettingManagementConfigService {
-  constructor(private store: Store) {
+  get store(): Store {
+    return this.injector.get(Store);
+  }
+
+  constructor(private injector: Injector) {
     const route = {
       name: 'AbpSettingManagement::Settings',
       path: 'setting-management',
@@ -23,7 +27,9 @@ export class SettingManagementConfigService {
     setTimeout(() => {
       const tabs = getSettingTabs();
       if (!tabs || !tabs.length) {
-        this.store.dispatch(new PatchRouteByName('AbpSettingManagement::Settings', { ...route, invisible: true }));
+        this.store.dispatch(
+          new PatchRouteByName('AbpSettingManagement::Settings', { ...route, invisible: true }),
+        );
       }
     });
   }

npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.ts

@@ -1,11 +1,9 @@
-import { Component, TrackByFunction, OnInit } from '@angular/core';
-import { SettingTab, getSettingTabs } from '@abp/ng.theme.shared';
-import { Router } from '@angular/router';
-import { Store } from '@ngxs/store';
 import { ConfigState } from '@abp/ng.core';
-import { SettingManagementState } from '../states/setting-management.state';
+import { getSettingTabs, SettingTab } from '@abp/ng.theme.shared';
+import { Component, OnInit, TrackByFunction } from '@angular/core';
+import { Store } from '@ngxs/store';
 import { SetSelectedSettingTab } from '../actions/setting-management.actions';
-import { RouterState } from '@ngxs/router-plugin';
+import { SettingManagementState } from '../states/setting-management.state';
 
 @Component({
   selector: 'abp-setting-management',
@@ -29,11 +27,13 @@ export class SettingManagementComponent implements OnInit {
 
   trackByFn: TrackByFunction<SettingTab> = (_, item) => item.name;
 
-  constructor(private router: Router, private store: Store) {}
+  constructor(private store: Store) {}
 
   ngOnInit() {
     this.settings = getSettingTabs()
-      .filter(setting => this.store.selectSnapshot(ConfigState.getGrantedPolicy(setting.requiredPolicy)))
+      .filter(setting =>
+        this.store.selectSnapshot(ConfigState.getGrantedPolicy(setting.requiredPolicy)),
+      )
       .sort((a, b) => a.order - b.order);
 
     if (!this.selected && this.settings.length) {

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

@@ -1,11 +1,13 @@
 import { Action, Selector, State, StateContext } from '@ngxs/store';
 import { SetSelectedSettingTab } from '../actions/setting-management.actions';
 import { SettingManagement } from '../models/setting-management';
+import { Injectable } from '@angular/core';
 
 @State<SettingManagement.State>({
   name: 'SettingManagementState',
   defaults: { selectedTab: {} } as SettingManagement.State,
 })
+@Injectable()
 export class SettingManagementState {
   @Selector()
   static getSelectedTab({ selectedTab }: SettingManagement.State) {
@@ -13,7 +15,10 @@ export class SettingManagementState {
   }
 
   @Action(SetSelectedSettingTab)
-  settingManagementAction({ patchState }: StateContext<SettingManagement.State>, { payload }: SetSelectedSettingTab) {
+  settingManagementAction(
+    { patchState }: StateContext<SettingManagement.State>,
+    { payload }: SetSelectedSettingTab,
+  ) {
     patchState({
       selectedTab: payload,
     });

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

@@ -10,11 +10,13 @@ import {
 } from '../actions/tenant-management.actions';
 import { TenantManagement } from '../models/tenant-management';
 import { TenantManagementService } from '../services/tenant-management.service';
+import { Injectable } from '@angular/core';
 
 @State<TenantManagement.State>({
   name: 'TenantManagementState',
   defaults: { result: {}, selectedItem: {} } as TenantManagement.State,
 })
+@Injectable()
 export class TenantManagementState {
   @Selector()
   static get({ result }: TenantManagement.State): ABP.BasicItem[] {

npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.html

@@ -147,7 +147,9 @@
 </nav>
 
 <div
-  [@slideFromBottom]="outlet && outlet.activatedRoute && outlet.activatedRoute.routeConfig.path"
+  [@slideFromBottom]="
+    outlet && outlet.isActivated && outlet.activatedRoute && outlet.activatedRoute.routeConfig.path
+  "
   class="container"
 >
   <router-outlet #outlet="outlet"></router-outlet>

npm/ng-packs/packages/theme-basic/src/lib/states/layout.state.ts

@@ -2,11 +2,13 @@ import { Action, Selector, State, StateContext } from '@ngxs/store';
 import snq from 'snq';
 import { AddNavigationElement, RemoveNavigationElementByName } from '../actions/layout.actions';
 import { Layout } from '../models/layout';
+import { Injectable } from '@angular/core';
 
 @State<Layout.State>({
   name: 'LayoutState',
   defaults: { navigationElements: [] } as Layout.State,
 })
+@Injectable()
 export class LayoutState {
   @Selector()
   static getNavigationElements({ navigationElements }: Layout.State): Layout.NavigationElement[] {

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

@@ -220,11 +220,12 @@ export class ErrorHandler {
       .resolveComponentFactory(HttpErrorWrapperComponent)
       .create(this.injector);
 
-    for (const key in this.componentRef.instance) {
+    for (const key in instance) {
       if (this.componentRef.instance.hasOwnProperty(key)) {
         this.componentRef.instance[key] = instance[key];
       }
     }
+
     this.componentRef.instance.hideCloseIcon = this.httpErrorConfig.errorScreen.hideCloseIcon;
     if (this.canCreateCustomError(instance.status as ErrorScreenErrorCodes)) {
       this.componentRef.instance.cfRes = this.cfRes;