transferState added to user and roles list to support ssr

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

@@ -25,3 +25,4 @@ export * from './local-storage-listener.service';
 export * from './title-strategy.service';
 export * from './timezone.service';
 export * from './time.service';
+export * from './ssr.service';

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

@@ -7,7 +7,7 @@ import { isPlatformServer } from '@angular/common';
 export class SSRService {
   constructor(@Inject(PLATFORM_ID) private platformId: unknown) {}
 
-  isSsr() {
+  get isSsr() {
     return isPlatformServer(this.platformId);
   }
 }

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

@@ -5,6 +5,7 @@ import {
   PagedAndSortedResultRequestDto,
   PagedResultDto,
   ReplaceableTemplateDirective,
+  SSRService,
 } from '@abp/ng.core';
 import { IdentityRoleDto, IdentityRoleService } from '@abp/ng.identity/proxy';
 import {
@@ -26,7 +27,7 @@ import {
   FormPropData,
   generateFormFromProps,
 } from '@abp/ng.components/extensible';
-import { Component, inject, Injector, OnInit } from '@angular/core';
+import { Component, inject, Injector, makeStateKey, OnInit, TransferState } from '@angular/core';
 import { ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
 import { finalize } from 'rxjs/operators';
 import { eIdentityComponents } from '../../enums/components';
@@ -64,6 +65,8 @@ export class RolesComponent implements OnInit {
   protected readonly toasterService = inject(ToasterService);
   private readonly injector = inject(Injector);
   protected readonly service = inject(IdentityRoleService);
+  protected readonly ssrService = inject(SSRService);
+  ROLES_KEY = makeStateKey<any>('roles');
 
   data: PagedResultDto<IdentityRoleDto> = { items: [], totalCount: 0 };
 
@@ -81,6 +84,8 @@ export class RolesComponent implements OnInit {
 
   permissionManagementKey = ePermissionManagementComponents.PermissionManagement;
 
+  constructor(private transferState: TransferState) {}
+
   onVisiblePermissionChange = (event: boolean) => {
     this.visiblePermissions = event;
   };
@@ -142,12 +147,22 @@ export class RolesComponent implements OnInit {
   }
 
   private hookToQuery() {
-    this.list
+    if (this.transferState.hasKey(this.ROLES_KEY)) {
-      .hookToQuery(query => this.service.getList(query))
+      this.data = this.transferState.get<PagedResultDto<IdentityRoleDto>>(this.ROLES_KEY, {
-      .subscribe(res => {
+        items: [],
-        console.log(res);
+        totalCount: 0,
-        this.data = res;
       });
+      this.transferState.remove(this.ROLES_KEY);
+    } else {
+      this.list
+        .hookToQuery(query => this.service.getList(query))
+        .subscribe(res => {
+          this.data = res;
+          if (this.ssrService.isSsr) {
+            this.transferState.set(this.ROLES_KEY, res);
+          }
+        });
+    }
   }
 
   openPermissionsModal(providerKey: string) {

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

@@ -4,6 +4,7 @@ import {
   LocalizationPipe,
   PagedResultDto,
   ReplaceableTemplateDirective,
+  SSRService,
 } from '@abp/ng.core';
 import {
   GetIdentityUsersInput,
@@ -34,13 +35,13 @@ import {
 } from '@abp/ng.components/extensible';
 import {
   Component,
-  Inject,
   inject,
   Injector,
+  makeStateKey,
   OnInit,
-  PLATFORM_ID,
   TemplateRef,
   TrackByFunction,
+  TransferState,
   ViewChild,
 } from '@angular/core';
 import {
@@ -56,7 +57,6 @@ import { eIdentityComponents } from '../../enums/components';
 import { PageComponent } from '@abp/ng.components/page';
 import { NgbDropdownModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
-import { isPlatformBrowser } from '@angular/common';
 
 @Component({
   selector: 'abp-users',
@@ -94,6 +94,7 @@ export class UsersComponent implements OnInit {
   protected readonly toasterService = inject(ToasterService);
   private readonly fb = inject(UntypedFormBuilder);
   private readonly injector = inject(Injector);
+  USERS_KEY = makeStateKey<any>('users');
 
   data: PagedResultDto<IdentityUserDto> = { items: [], totalCount: 0 };
 
@@ -124,7 +125,9 @@ export class UsersComponent implements OnInit {
 
   trackByFn: TrackByFunction<AbstractControl> = (index, item) => Object.keys(item)[0] || index;
 
-  constructor(@Inject(PLATFORM_ID) private platformId: any) {}
+  public ssrService = inject(SSRService);
+
+  constructor(private transferState: TransferState) {}
 
   onVisiblePermissionChange = (event: boolean) => {
     this.visiblePermissions = event;
@@ -237,7 +240,19 @@ export class UsersComponent implements OnInit {
   }
 
   private hookToQuery() {
-    this.list.hookToQuery(query => this.service.getList(query)).subscribe(res => (this.data = res));
+    if (this.transferState.hasKey(this.USERS_KEY)) {
+      this.data = this.transferState.get(this.USERS_KEY, { items: [], totalCount: 0 });
+      this.transferState.remove(this.USERS_KEY);
+    } else {
+      this.list
+        .hookToQuery(query => this.service.getList(query))
+        .subscribe(res => {
+          this.data = res;
+          if (this.ssrService.isSsr) {
+            this.transferState.set(this.USERS_KEY, res);
+          }
+        });
+    }
   }
 
   openPermissionsModal(providerKey: string, entityDisplayName?: string) {