fix range error in permission directive (#13307)

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

@@ -1,4 +1,5 @@
 import {
+  AfterViewInit,
   ChangeDetectorRef,
   Directive,
   Input,
@@ -8,20 +9,24 @@ import {
   TemplateRef,
   ViewContainerRef,
 } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { distinctUntilChanged } from 'rxjs/operators';
+import { ReplaySubject, Subscription } from 'rxjs';
+import { distinctUntilChanged, take } from 'rxjs/operators';
 import { PermissionService } from '../services/permission.service';
 
 @Directive({
   selector: '[abpPermission]',
 })
-export class PermissionDirective implements OnDestroy, OnChanges {
+export class PermissionDirective implements OnDestroy, OnChanges, AfterViewInit {
   @Input('abpPermission') condition: string | undefined;
 
   @Input('abpPermissionRunChangeDetection') runChangeDetection = true;
 
   subscription!: Subscription;
 
+  cdrSubject = new ReplaySubject();
+
+  rendered = false;
+
   constructor(
     @Optional() private templateRef: TemplateRef<any>,
     private vcRef: ViewContainerRef,
@@ -41,7 +46,11 @@ export class PermissionDirective implements OnDestroy, OnChanges {
         this.vcRef.clear();
         if (isGranted) this.vcRef.createEmbeddedView(this.templateRef);
         if (this.runChangeDetection) {
-          this.cdRef.detectChanges();
+          if (!this.rendered) {
+            this.cdrSubject.next();
+          } else {
+            this.cdRef.detectChanges();
+          }
         } else {
           this.cdRef.markForCheck();
         }
@@ -55,4 +64,9 @@ export class PermissionDirective implements OnDestroy, OnChanges {
   ngOnChanges() {
     this.check();
   }
+
+  ngAfterViewInit() {
+    this.cdrSubject.pipe(take(1)).subscribe(() => this.cdRef.detectChanges());
+    this.rendered = true;
+  }
 }

npm/ng-packs/packages/core/src/lib/tests/permission.directive.spec.ts

@@ -76,6 +76,20 @@ describe('PermissionDirective', () => {
       expect(detectChanges).toHaveBeenCalled();
     });
 
+    it('should not call change detection before ngAfterViewInit', () => {
+      // hook before ngAfterViewInit
+
+      const detectChanges = jest.spyOn(cdr, 'detectChanges');
+      spectator.setHostInput({ condition: 'test' });
+      grantedPolicy$.next(true);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      directive.onInit = () => {
+        expect(detectChanges).not.toHaveBeenCalled();
+      };
+      expect(detectChanges).toHaveBeenCalled();
+    });
+
     describe('#subscription', () => {
       it('should call the unsubscribe', () => {
         const spy = jest.fn(() => {});