{"record":{"id":"3a1a1cbc77d77519","repo":"angular/components","slug":"cannot-interact-with-a-markerclusterer-before-it-h-3a1a1c","errorCode":null,"errorMessage":"Cannot interact with a MarkerClusterer before it has been initialized. Please wait for the MarkerClusterer to load before trying to interact with it.","messagePattern":"Cannot interact with a MarkerClusterer before it has been initialized\\. Please wait for the MarkerClusterer to load before trying to interact with it\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/google-maps/map-marker-clusterer/map-marker-clusterer.ts","lineNumber":221,"sourceCode":"    // See: https://github.com/googlemaps/js-markerclusterer/blob/main/src/markerclusterer.ts#L205\n    this.markerClusterer?.onRemove();\n    this.markerClusterer = undefined;\n  }\n\n  private _getInternalMarkers(markers: MarkerDirective[]): Promise<Marker[]> {\n    return Promise.all(markers.map(marker => marker._resolveMarker()));\n  }\n\n  private _assertInitialized(): asserts this is {markerClusterer: MarkerClusterer} {\n    if (typeof ngDevMode === 'undefined' || ngDevMode) {\n      if (!this._googleMap.googleMap) {\n        throw Error(\n          'Cannot access Google Map information before the API has been initialized. ' +\n            'Please wait for the API to load before trying to interact with it.',\n        );\n      }\n      if (!this.markerClusterer) {\n        throw Error(\n          'Cannot interact with a MarkerClusterer before it has been initialized. ' +\n            'Please wait for the MarkerClusterer to load before trying to interact with it.',\n        );\n      }\n    }\n  }\n}\n","sourceCodeStart":203,"sourceCodeEnd":229,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/google-maps/map-marker-clusterer/map-marker-clusterer.ts#L203-L229","documentation":"The second half of the same guard: thrown when the Google Map exists but the MarkerClusterer instance itself has not been constructed yet (the async _createCluster hasn't finished or failed). The library refuses marker-change watching until the cluster exists so marker operations don't hit an undefined clusterer.","triggerScenarios":"_watchForMarkerChanges runs (markers change, QueryList emits) after the map exists but before the async _createCluster resolves the cluster — e.g. adding markers in the same tick the clusterer mounts, or after _createCluster threw error 174 so markerClusterer never got set.","commonSituations":"Markers rendered synchronously with the clusterer at bootstrap; missing markerclusterer library (error 174) leaving the cluster undefined; rapid *ngFor updates firing before the cluster promise resolves.","solutions":["Fix any prior _createCluster failure first (install @googlemaps/markerclusterer) — this error often follows error 174.","Delay marker rendering until after the clusterer signals readiness (e.g. ngAfterViewInit + small delay or a loaded flag).","Add markers in the clusterer's content projection after the map ready event, not in ngOnInit.","Avoid toggling the clusterer with *ngIf while markers continue emitting; keep it mounted once the map is ready.","Retry marker updates on the next change-detection cycle after initialization completes."],"exampleFix":"// before\n// markers emitted immediately; cluster not built yet -> throws\nthis.markers = initialMarkers; // set in same tick as clusterer mount\n// after\nthis.map.ready.subscribe(() => {\n  setTimeout(() => { this.markers = initialMarkers; });\n});","handlingStrategy":"retry","validationCode":"if (!mapRef?.googleMap || !clustererReady) { /* retry after tick */ }","typeGuard":"function isClusterReady(c: MarkerClusterer | undefined | null): c is MarkerClusterer { return !!c; }","tryCatchPattern":"try {\n  watchMarkers();\n} catch (e) {\n  if ((e as Error).message.includes('MarkerClusterer before it has been initialized')) {\n    setTimeout(watchMarkers, 0); // retry after async cluster creation\n  } else { throw e; }\n}","preventionTips":["Fix underlying _createCluster failures first (missing library).","Add markers after the cluster has had a chance to build (post-ready tick).","Avoid *ngIf toggling that destroys/recreates the clusterer mid-emit.","Sequence: map ready -> clusterer mounted -> markers rendered.","Keep clusterer mounted for the map's lifetime."],"tags":["angular","google-maps","lifecycle","async","markerclusterer"],"backgroundTag":"component-accessed-before-initialization","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}