{"record":{"id":"33155d5a8687c5d8","repo":"angular/components","slug":"cannot-interact-with-a-google-map-polyline-before","errorCode":null,"errorMessage":"Cannot interact with a Google Map Polyline before it has been initialized. Please wait for the Polyline to load before trying to interact with it.","messagePattern":"Cannot interact with a Google Map Polyline before it has been initialized\\. Please wait for the Polyline to load before trying to interact with it\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/google-maps/map-polyline/map-polyline.ts","lineNumber":250,"sourceCode":"    this._options.pipe(takeUntil(this._destroyed)).subscribe(options => {\n      this._assertInitialized();\n      this.polyline.setOptions(options);\n    });\n  }\n\n  private _watchForPathChanges() {\n    this._path.pipe(takeUntil(this._destroyed)).subscribe(path => {\n      if (path) {\n        this._assertInitialized();\n        this.polyline.setPath(path);\n      }\n    });\n  }\n\n  private _assertInitialized(): asserts this is {polyline: google.maps.Polyline} {\n    if (typeof ngDevMode === 'undefined' || ngDevMode) {\n      if (!this.polyline) {\n        throw Error(\n          'Cannot interact with a Google Map Polyline before it has been ' +\n            'initialized. Please wait for the Polyline to load before trying to interact with it.',\n        );\n      }\n    }\n  }\n}\n","sourceCodeStart":232,"sourceCodeEnd":258,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/google-maps/map-polyline/map-polyline.ts#L232-L258","documentation":"Thrown by MapPolyline's dev-mode assertion when its internal google.maps.Polyline is still undefined. The polyline object is created asynchronously after map/input initialization. The guard ensures premature interaction produces a clear dev-mode error.","triggerScenarios":"Calling getDraggable(), getEditable(), getPath(), getVisible(), or triggering _watchForOptionsChanges before polyline construction — e.g. changing options inputs in the same tick as mount, calls in ngOnInit, or usage before the Maps API loads.","commonSituations":"Toggling polyline visibility immediately at bootstrap, reading path right after setting it, polyline rendered conditionally while old references persist, API script blocked or slow.","solutions":["Defer accessor calls until after map ready or ngAfterViewInit.","Drive polyline state via inputs ([options], [path]) and let change detection apply them instead of imperative getters at startup.","Ensure the polyline is inside an initialized MapComponent and the Maps API loaded.","If reading state after updates, wait for the corresponding Google Maps event or a microtask after change detection.","Wrap accessors in try-catch for dev resilience."],"exampleFix":"// before\nngOnInit() {\n  this.polyline.setVisible(true); // throws\n}\n// after\nngAfterViewInit() {\n  this.map.ready.subscribe(() => this.polyline.setVisible(true));\n}","handlingStrategy":"validation","validationCode":"if (!polylineRef) { /* defer */ }","typeGuard":"function isPolylineReady(p: MapPolyline | undefined): p is MapPolyline { return !!p; }","tryCatchPattern":"try {\n  polyline.setVisible(true);\n} catch (e) {\n  if ((e as Error).message.includes('Google Map Polyline')) {\n    this.map.ready.subscribe(() => polyline.setVisible(true));\n  } else { throw e; }\n}","preventionTips":["Toggle polyline visibility after map ready.","Use [options] input binding instead of imperative calls at startup.","Keep polyline inside MapComponent template.","Sequence updates one change-detection cycle after mount.","Verify Maps API loads when errors persist."],"tags":["angular","google-maps","lifecycle","initialization"],"backgroundTag":"component-accessed-before-initialization","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}