refactor: remove resolvers

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

@@ -1,6 +1,6 @@
 import { ABP } from '@abp/ng.core';
 import { ConfirmationService, Toaster } from '@abp/ng.theme.shared';
-import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { Component, TemplateRef, ViewChild, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { Select, Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
@@ -13,7 +13,7 @@ import { IdentityState } from '../../states/identity.state';
   selector: 'abp-roles',
   templateUrl: './roles.component.html',
 })
-export class RolesComponent {
+export class RolesComponent implements OnInit {
   @Select(IdentityState.getRoles)
   data$: Observable<Identity.RoleItem[]>;
 
@@ -45,6 +45,10 @@ export class RolesComponent {
 
   constructor(private confirmationService: ConfirmationService, private fb: FormBuilder, private store: Store) {}
 
+  ngOnInit() {
+    this.get();
+  }
+
   onSearch(value) {
     this.pageQuery.filter = value;
     this.get();

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

@@ -112,7 +112,11 @@
   </ng-template>
 
   <ng-template #abpBody>
-    <form [formGroup]="form" (ngSubmit)="save()">
+    <ng-template #loaderRef
+      ><div class="text-center"><i class="fa fa-pulse fa-spinner"></i></div
+    ></ng-template>
+
+    <form *ngIf="form; else loaderRef" [formGroup]="form" (ngSubmit)="save()">
       <ngb-tabset>
         <ngb-tab [title]="'AbpIdentity::UserInformations' | abpLocalization">
           <ng-template ngbTabContent>
@@ -210,7 +214,7 @@
     <button type="button" class="btn btn-secondary" #abpClose>
       {{ 'AbpIdentity::Cancel' | abpLocalization }}
     </button>
-    <abp-button iconClass="fa fa-check" (click)="save()" [disabled]="form.invalid">{{
+    <abp-button iconClass="fa fa-check" (click)="save()" [disabled]="form?.invalid">{{
       'AbpIdentity::Save' | abpLocalization
     }}</abp-button>
   </ng-template>

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

@@ -1,6 +1,6 @@
 import { ABP } from '@abp/ng.core';
 import { ConfirmationService, Toaster } from '@abp/ng.theme.shared';
-import { Component, TemplateRef, TrackByFunction, ViewChild } from '@angular/core';
+import { Component, TemplateRef, TrackByFunction, ViewChild, OnInit } from '@angular/core';
 import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { Select, Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
@@ -13,6 +13,7 @@ import {
   GetUserRoles,
   GetUsers,
   UpdateUser,
+  GetRoles,
 } from '../../actions/identity.actions';
 import { Identity } from '../../models/identity';
 import { IdentityState } from '../../states/identity.state';
@@ -20,7 +21,7 @@ import { IdentityState } from '../../states/identity.state';
   selector: 'abp-users',
   templateUrl: './users.component.html',
 })
-export class UsersComponent {
+export class UsersComponent implements OnInit {
   @Select(IdentityState.getUsers)
   data$: Observable<Identity.UserItem[]>;
 
@@ -62,32 +63,39 @@ export class UsersComponent {
 
   constructor(private confirmationService: ConfirmationService, private fb: FormBuilder, private store: Store) {}
 
+  ngOnInit() {
+    this.get();
+  }
+
   onSearch(value) {
     this.pageQuery.filter = value;
     this.get();
   }
 
   buildForm() {
-    this.roles = this.store.selectSnapshot(IdentityState.getRoles);
-    this.form = this.fb.group({
-      userName: [this.selected.userName || '', [Validators.required, Validators.maxLength(256)]],
-      email: [this.selected.email || '', [Validators.required, Validators.email, Validators.maxLength(256)]],
-      name: [this.selected.name || '', [Validators.maxLength(64)]],
-      surname: [this.selected.surname || '', [Validators.maxLength(64)]],
-      phoneNumber: [this.selected.phoneNumber || '', [Validators.maxLength(16)]],
-      lockoutEnabled: [this.selected.twoFactorEnabled || (this.selected.id ? false : true)],
-      twoFactorEnabled: [this.selected.twoFactorEnabled || (this.selected.id ? false : true)],
-      roleNames: this.fb.array(
-        this.roles.map(role =>
-          this.fb.group({
-            [role.name]: [!!snq(() => this.selectedUserRoles.find(userRole => userRole.id === role.id))],
-          }),
+    this.store.dispatch(new GetRoles()).subscribe(() => {
+      this.roles = this.store.selectSnapshot(IdentityState.getRoles);
+      this.form = this.fb.group({
+        userName: [this.selected.userName || '', [Validators.required, Validators.maxLength(256)]],
+        email: [this.selected.email || '', [Validators.required, Validators.email, Validators.maxLength(256)]],
+        name: [this.selected.name || '', [Validators.maxLength(64)]],
+        surname: [this.selected.surname || '', [Validators.maxLength(64)]],
+        phoneNumber: [this.selected.phoneNumber || '', [Validators.maxLength(16)]],
+        lockoutEnabled: [this.selected.twoFactorEnabled || (this.selected.id ? false : true)],
+        twoFactorEnabled: [this.selected.twoFactorEnabled || (this.selected.id ? false : true)],
+        roleNames: this.fb.array(
+          this.roles.map(role =>
+            this.fb.group({
+              [role.name]: [!!snq(() => this.selectedUserRoles.find(userRole => userRole.id === role.id))],
+            }),
+          ),
         ),
-      ),
+      });
+
+      if (!this.selected.userName) {
+        this.form.addControl('password', new FormControl('', [Validators.required, Validators.maxLength(32)]));
+      }
     });
-    if (!this.selected.userName) {
-      this.form.addControl('password', new FormControl('', [Validators.required, Validators.maxLength(32)]));
-    }
   }
 
   openModal() {

npm/ng-packs/packages/identity/src/lib/identity-routing.module.ts

@@ -1,10 +1,8 @@
+import { AuthGuard, DynamicLayoutComponent, PermissionGuard } from '@abp/ng.core';
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 import { RolesComponent } from './components/roles/roles.component';
-import { RoleResolver } from './resolvers/roles.resolver';
-import { DynamicLayoutComponent, AuthGuard, PermissionGuard } from '@abp/ng.core';
 import { UsersComponent } from './components/users/users.component';
-import { UserResolver } from './resolvers/users.resolver';
 
 const routes: Routes = [
   { path: '', redirectTo: 'roles', pathMatch: 'full' },
@@ -16,14 +14,12 @@ const routes: Routes = [
       {
         path: 'roles',
         component: RolesComponent,
-        resolve: [RoleResolver],
         data: { requiredPolicy: 'AbpIdentity.Roles' },
       },
       {
         path: 'users',
         component: UsersComponent,
         data: { requiredPolicy: 'AbpIdentity.Users' },
-        resolve: [RoleResolver, UserResolver],
       },
     ],
   },
@@ -32,6 +28,5 @@ const routes: Routes = [
 @NgModule({
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
-  providers: [RoleResolver, UserResolver],
 })
 export class IdentityRoutingModule {}

npm/ng-packs/packages/identity/src/lib/resolvers/roles.resolver.ts

@@ -1,16 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
-import { Store } from '@ngxs/store';
-import { GetRoles } from '../actions/identity.actions';
-import { Identity } from '../models/identity';
-import { IdentityState } from '../states/identity.state';
-
-@Injectable()
-export class RoleResolver implements Resolve<Identity.State> {
-  constructor(private store: Store) {}
-
-  resolve() {
-    const roles = this.store.selectSnapshot(IdentityState.getRoles);
-    return roles && roles.length ? null : this.store.dispatch(new GetRoles());
-  }
-}

npm/ng-packs/packages/identity/src/lib/resolvers/users.resolver.ts

@@ -1,16 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
-import { Store } from '@ngxs/store';
-import { GetUsers } from '../actions/identity.actions';
-import { Identity } from '../models/identity';
-import { IdentityState } from '../states/identity.state';
-
-@Injectable()
-export class UserResolver implements Resolve<Identity.State> {
-  constructor(private store: Store) {}
-
-  resolve() {
-    const users = this.store.selectSnapshot(IdentityState.getUsers);
-    return users && users.length ? null : this.store.dispatch(new GetUsers());
-  }
-}

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

@@ -23,22 +23,22 @@ import { IdentityService } from '../services/identity.service';
 export class IdentityState {
   @Selector()
   static getRoles({ roles }: Identity.State): Identity.RoleItem[] {
-    return roles.items;
+    return roles.items || [];
   }
 
   @Selector()
   static getRolesTotalCount({ roles }: Identity.State): number {
-    return roles.totalCount;
+    return roles.totalCount || 0;
   }
 
   @Selector()
   static getUsers({ users }: Identity.State): Identity.UserItem[] {
-    return users.items;
+    return users.items || [];
   }
 
   @Selector()
   static getUsersTotalCount({ users }: Identity.State): number {
-    return users.totalCount;
+    return users.totalCount || 0;
   }
 
   constructor(private identityService: IdentityService) {}

npm/ng-packs/packages/identity/src/public-api.ts

@@ -7,6 +7,5 @@ export * from './lib/actions/identity.actions';
 export * from './lib/components/roles/roles.component';
 export * from './lib/constants/routes';
 export * from './lib/models/identity';
-export * from './lib/resolvers/roles.resolver';
 export * from './lib/services/identity.service';
 export * from './lib/states/identity.state';

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

@@ -1,15 +1,15 @@
 import { ABP } from '@abp/ng.core';
 import { ConfirmationService, Toaster } from '@abp/ng.theme.shared';
-import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Select, Store } from '@ngxs/store';
-import { Observable, Subject } from 'rxjs';
-import { debounceTime, finalize, pluck, switchMap, take } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+import { finalize, pluck, switchMap, take } from 'rxjs/operators';
 import {
   CreateTenant,
   DeleteTenant,
-  GetTenants,
   GetTenantById,
+  GetTenants,
   UpdateTenant,
 } from '../../actions/tenant-management.actions';
 import { TenantManagementService } from '../../services/tenant-management.service';
@@ -25,7 +25,7 @@ interface SelectedModalContent {
   selector: 'abp-tenants',
   templateUrl: './tenants.component.html',
 })
-export class TenantsComponent {
+export class TenantsComponent implements OnInit {
   @Select(TenantManagementState.get)
   data$: Observable<ABP.BasicItem[]>;
 
@@ -81,6 +81,10 @@ export class TenantsComponent {
     private store: Store,
   ) {}
 
+  ngOnInit() {
+    this.get();
+  }
+
   onSearch(value) {
     this.pageQuery.filter = value;
     this.get();

npm/ng-packs/packages/tenant-management/src/lib/resolvers/index.ts

@@ -1 +0,0 @@
-export * from './tenants.resolver';

npm/ng-packs/packages/tenant-management/src/lib/resolvers/tenants.resolver.ts

@@ -1,16 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
-import { Store } from '@ngxs/store';
-import { GetTenants } from '../actions/tenant-management.actions';
-import { TenantManagement } from '../models/tenant-management';
-import { TenantManagementState } from '../states/tenant-management.state';
-
-@Injectable()
-export class TenantsResolver implements Resolve<TenantManagement.State> {
-  constructor(private store: Store) {}
-
-  resolve() {
-    const data = this.store.selectSnapshot(TenantManagementState.get);
-    return data && data.length ? null : this.store.dispatch(new GetTenants());
-  }
-}

npm/ng-packs/packages/tenant-management/src/lib/tenant-management-routing.module.ts

@@ -1,7 +1,6 @@
 import { AuthGuard, DynamicLayoutComponent, PermissionGuard } from '@abp/ng.core';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { TenantsResolver } from './resolvers/tenants.resolver';
 import { TenantsComponent } from './components/tenants/tenants.component';
 
 const routes: Routes = [
@@ -11,13 +10,12 @@ const routes: Routes = [
     component: DynamicLayoutComponent,
     canActivate: [AuthGuard, PermissionGuard],
     data: { requiredPolicy: 'AbpTenantManagement.Tenants' },
-    children: [{ path: '', component: TenantsComponent, resolve: [TenantsResolver] }],
+    children: [{ path: '', component: TenantsComponent }],
   },
 ];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
-  providers: [TenantsResolver],
 })
 export class TenantManagementRoutingModule {}

npm/ng-packs/packages/tenant-management/src/public-api.ts

@@ -3,6 +3,5 @@ export * from './lib/actions';
 export * from './lib/components';
 export * from './lib/constants';
 export * from './lib/models';
-export * from './lib/resolvers';
 export * from './lib/services';
 export * from './lib/states';

templates/app/angular/package.json

@@ -18,17 +18,14 @@
     "@abp/ng.setting-management": "^0.9.1",
     "@abp/ng.tenant-management": "^0.9.1",
     "@abp/ng.theme.basic": "^0.9.1",
-    "@angular/animations": "~8.2.10",
-    "@angular/common": "~8.2.10",
-    "@angular/compiler": "~8.2.10",
-    "@angular/core": "~8.2.10",
-    "@angular/forms": "~8.2.10",
-    "@angular/platform-browser": "~8.2.10",
-    "@angular/platform-browser-dynamic": "~8.2.10",
-    "@angular/router": "~8.2.10",
-    "@angularclass/hmr": "^2.1.3",
-    "@ngxs/devtools-plugin": "^3.5.0",
-    "@ngxs/hmr-plugin": "^3.5.0",
+    "@angular/animations": "~8.2.11",
+    "@angular/common": "~8.2.11",
+    "@angular/compiler": "~8.2.11",
+    "@angular/core": "~8.2.11",
+    "@angular/forms": "~8.2.11",
+    "@angular/platform-browser": "~8.2.11",
+    "@angular/platform-browser-dynamic": "~8.2.11",
+    "@angular/router": "~8.2.11",
     "rxjs": "~6.4.0",
     "tslib": "^1.10.0",
     "zone.js": "~0.9.1"
@@ -36,19 +33,22 @@
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.803.9",
     "@angular/cli": "~8.3.9",
-    "@angular/compiler-cli": "~8.2.10",
-    "@angular/language-service": "~8.2.10",
+    "@angular/compiler-cli": "~8.2.11",
+    "@angular/language-service": "~8.2.11",
+    "@angularclass/hmr": "^2.1.3",
+    "@ngxs/hmr-plugin": "^3.5.0",
+    "@ngxs/logger-plugin": "^3.5.1",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~8.9.4",
     "codelyzer": "^5.0.0",
     "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.1.0",
     "karma-chrome-launcher": "~2.2.0",
     "karma-coverage-istanbul-reporter": "~2.0.1",
-    "karma-jasmine": "~2.0.1",
     "karma-jasmine-html-reporter": "^1.4.0",
+    "karma-jasmine": "~2.0.1",
+    "karma": "~4.1.0",
     "ngxs-schematic": "^1.1.9",
     "protractor": "~5.4.0",
     "ts-node": "~7.0.0",

templates/app/angular/src/app/app.module.ts

@@ -3,7 +3,7 @@ import { LAYOUTS } from '@abp/ng.theme.basic';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
+import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
 import { NgxsModule } from '@ngxs/store';
 import { OAuthModule } from 'angular-oauth2-oidc';
 import { environment } from '../environments/environment';
@@ -16,16 +16,18 @@ import { IdentityConfigModule } from '@abp/ng.identity.config';
 import { TenantManagementConfigModule } from '@abp/ng.tenant-management.config';
 import { SettingManagementConfigModule } from '@abp/ng.setting-management.config';
 
+const LOGGERS = [NgxsLoggerPluginModule.forRoot({ disabled: false })];
+
 @NgModule({
   declarations: [AppComponent],
   imports: [
-    ThemeSharedModule.forRoot(),
     CoreModule.forRoot({
       environment,
       requirements: {
         layouts: LAYOUTS,
       },
     }),
+    ThemeSharedModule.forRoot(),
     OAuthModule.forRoot(),
     NgxsModule.forRoot([]),
     AccountConfigModule.forRoot({ redirectUrl: '/' }),
@@ -37,7 +39,7 @@ import { SettingManagementConfigModule } from '@abp/ng.setting-management.config
     AppRoutingModule,
     SharedModule,
 
-    NgxsReduxDevtoolsPluginModule.forRoot({ disabled: environment.production }),
+    ...(environment.production ? [] : LOGGERS),
   ],
   bootstrap: [AppComponent],
 })