Angular 7: ChangeDetectorRef detectChanges() causes infinite loop when called from inside a subscription

Question

I am posting here after reading all the material related to change detection and similar post and failing to solve my problem.

ChangeDetectorRef detectChanges()

Answer 1

I resolved this. Issue was not with the lifecycle but with a directive leaflet from ngx-leaflet project.

When I removed leaflet related directive and bindings all errors vanished.

Error came even with this as well:

<ng-container *ngIf="!loading">
    <div
      class="map"
      leaflet
      (leafletMapReady)="onMapReady($event)"
      [leafletOptions]="options"
      [leafletLayers]="layers"
      [leafletLayersControl]="layersControl">
    </div>
</ng-container>

I tried adding detectChanges and markForCheck alternatively, but again got no luck.

  onMapReady(map: Map) {
    this.map = map;
    setTimeout(() => map.invalidateSize(), 1000);
    this.route.params.subscribe(params => {
      this.userId = params["userId"];
      this.loadActivity();
    });
    this.cdRef.markForCheck();
  }

Finally, I ditched leaflet while writing this answer, and I am going to try Angular-Google-Maps.

And yeah A-G-M is working fine.