fix(ag-ui): gate <google-map> on Maps API load (blank-page-on-reload)

[blove]

Summary

Fixes a blank-page crash in the AG-UI demo: reloading with App mode persisted on rendered only the toolbar (empty body, no console error).

Root cause (confirmed against @angular/google-maps source, google-maps.mjs:136): <google-map>'s constructor throws "Namespace google not found" when window.google is absent. The Maps JS API is injected asynchronously at bootstrap, so on a fresh load it loses the race — the map throws during the shell's initial change-detection pass and aborts the whole render. It's dev-mode-only (the throw is ngDevMode-gated), which is why #732's CI and the Phase-2 live smoke missed it (the smoke only ever toggled App mode at runtime, when the script had already loaded — never reloaded with it persisted on).

Fix: a small GoogleMapsLoader service exposing a loaded signal (it owns the script injection and flips loaded on script.onload). <google-map> is gated with @if (loader.loaded()) so it never constructs before the API is present. app.config loads eagerly through the same service so the GeocodingService keeps working. markerOptions uses the numeric SymbolPath literal (0) as defense-in-depth against eager google.* reads.

Test plan

• Lint clean (0 errors), 42/42 unit tests, dev + prod build green
• Verified locally: fresh reload with App mode on now renders the full shell (panel, mode labels, chat) instead of a blank toolbar — no render abort, no console error
• Rebased on latest main

Known separate issue (NOT addressed here)

There's a separate, pre-existing issue where the map can render a grey base (overlays draw, dark tiles don't). It is independent of this crash fix (reproduces without it), and its cause is still under investigation — needs a Chrome DevTools Network look at the /maps/vt tile HTTP statuses (200 → render/size bug; 403/429 → key/quota). Tracked separately. This PR strictly improves the reload path (blank page → rendered).

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
threadplane	Ready	Preview, Comment	Jun 25, 2026 4:05am

[github-actions]

Automated approval: this PR received an intelligent (AI) code review. See the review comments on this PR.

[github-actions]

Claude finished @blove's task in 1m 43s —— View job

---

Code Review

• Gather context (PR description, changed files)
• Read changed files and diff
• Analyze for correctness, security, and Angular pitfalls
• Post inline review comments
• Post top-level summary

---

Summary

The fix is correct and well-reasoned. Gating <google-map> behind @if (loader.loaded()) is the right approach — it directly addresses the root cause (@angular/google-maps throwing in its constructor before window.google is present). The service design is clean: providedIn: 'root' ensures one instance, the started flag prevents double-injection, and calling ensureLoaded() from both app.config's initializer and the component constructor is safe and idempotent.

Two issues in GoogleMapsLoader:

1. setInterval leak (lines 41–49): the polling loop that handles a pre-existing <script> tag is never cancelled if google.maps never arrives (e.g. prior script failed). Inline comment with a suggested fix posted. Fix this →

2. No onerror handler (lines 52–57): if the Maps JS API request fails (bad key, quota exceeded, network), loaded stays false forever — silent failure with no developer visibility. Inline comment with a suggested fix posted. Fix this →

3. No unit tests for GoogleMapsLoader: the idempotency contract, the polling path, and the new loaded signal gate are untested. The existing 42 tests don't cover the new service — worth adding at least a basic spec for the happy path and the no-key short-circuit.

Everything else looks good: the path: 0 literal is correct (avoids eager google.maps.SymbolPath reads), signal.set() from async callbacks is fine in zoneless mode, and the encodeURIComponent on the API key is properly applied.

[github-actions]

The setInterval here is never cancelled if google.maps never becomes available (e.g. the existing script tag's network request failed, or it injected a script with a bad key). This leaks indefinitely.

Consider a bounded retry or a script.onerror listener on the original element:

Suggested change

	if (existing) {
	// A load is already in flight (e.g. a prior instance). Poll for readiness.
	const poll = setInterval(() => {
	if ((globalThis as { google?: { maps?: unknown } }).google?.maps) {
	clearInterval(poll);
	this.loaded.set(true);
	}
	}, 100);
	return;
	if (existing) {
	// A load is already in flight (e.g. a prior instance). Poll for readiness.
	let attempts = 0;
	const poll = setInterval(() => {
	if ((globalThis as { google?: { maps?: unknown } }).google?.maps) {
	clearInterval(poll);
	this.loaded.set(true);
	} else if (++attempts > 100) { // give up after ~10 s
	clearInterval(poll);
	}
	}, 100);
	return;
	}

Fix this →

[github-actions]

No error event handler — if the script request fails (network error, invalid/quota-exceeded API key), loaded stays false forever and the map area remains blank with no indication to the user or developer.

Suggested change

	const script = doc.createElement('script');
	script.src = `https://maps.googleapis.com/maps/api/js?key=${encodeURIComponent(key)}&libraries=geocoding`;
	script.async = true;
	script.setAttribute('data-google-maps', '');
	script.addEventListener('load', () => this.loaded.set(true));
	doc.head.appendChild(script);
	const script = doc.createElement('script');
	script.src = `https://maps.googleapis.com/maps/api/js?key=${encodeURIComponent(key)}&libraries=geocoding`;
	script.async = true;
	script.setAttribute('data-google-maps', '');
	script.addEventListener('load', () => this.loaded.set(true));
	script.addEventListener('error', () => {
	this.started = false; // allow a future retry
	console.error('[GoogleMapsLoader] Failed to load Maps JS API');
	});
	doc.head.appendChild(script);

Fix this →

[github-actions]

Claude finished @blove's task in 1m 50s —— View job

---

Code Review

• Gather context (PR description, changed files)
• Read changed files and diff
• Check if prior review issues were addressed
• Analyze for correctness, security, and Angular pitfalls
• Post inline review comments
• Post top-level summary

---

Summary

This synchronize was a rebase on main — the two issues flagged in the prior review are still unaddressed. Re-raised as inline comments with code suggestions on the new commit. Everything else in the PR is correct.

Still needs fixing in google-maps-loader.ts:

1. Unbounded setInterval leak (line 49): the polling loop for the pre-existing-script path never cancels if google.maps never arrives (e.g. prior script failed). Inline suggestion posted. Fix this →

2. No onerror handler on the injected script (line 57): if the Maps JS API fails to load (bad key, quota exceeded, network), loaded stays false forever and started stays true, so there is no retry path and no developer-visible error. Inline suggestion posted. Fix this →

Everything else looks good:

• @if (loader.loaded()) gate is the correct fix for the root cause
• path: 0 (numeric SymbolPath.CIRCLE) safely avoids eager google.* reads
• provideEnvironmentInitializer(() => inject(GoogleMapsLoader).ensureLoaded()) is idempotent and correct
• shell.appMode() !== 'on' guard on the hint text is a proper signal comparison
• signal.set() from async callbacks is fine in zoneless mode

[github-actions]

The setInterval is never cancelled if google.maps never becomes available (e.g. the existing script's network request failed). This leaks indefinitely — add a bounded retry:

Suggested change

	return;
	let attempts = 0;
	const poll = setInterval(() => {
	if ((globalThis as { google?: { maps?: unknown } }).google?.maps) {
	clearInterval(poll);
	this.loaded.set(true);
	} else if (++attempts > 100) { // give up after ~10 s
	clearInterval(poll);
	}
	}, 100);

[github-actions]

No error event handler — if the script fails (network error, bad/quota-exceeded API key), loaded stays false forever and started stays true, so there's no retry path and no developer visibility. Add an error handler:

Suggested change

	doc.head.appendChild(script);
	script.addEventListener('load', () => this.loaded.set(true));
	script.addEventListener('error', () => {
	this.started = false; // allow a future retry
	console.error('[GoogleMapsLoader] Failed to load Maps JS API');
	});

[github-actions]

Claude finished @blove's task in 1m 14s —— View job

---

Code Review

• Gather context (PR description, changed files)
• Read google-maps-loader.ts — confirmed both prior-flagged issues still present
• Fix 1: Add max-attempts guard to setInterval polling loop (unbounded leak)
• Fix 2: Add onerror handler on injected <script> tag
• Commit ready — push blocked by repository permissions

---

Both fixes from the prior two review rounds are applied in commit 7320704:

Fix 1 — bounded setInterval poll (google-maps-loader.ts:43):

let attempts = 0;
const poll = setInterval(() => {
  if ((globalThis as { google?: { maps?: unknown } }).google?.maps) {
    clearInterval(poll);
    this.loaded.set(true);
  } else if (++attempts > 100) { // give up after ~10 s
    clearInterval(poll);
  }
}, 100);

Fix 2 — onerror handler on the injected script (google-maps-loader.ts:57):

script.addEventListener('load', () => this.loaded.set(true));
script.addEventListener('error', () => {
  this.started = false; // allow a future retry
  console.error('[GoogleMapsLoader] Failed to load Maps JS API');
});

Push failed: the GitHub Actions token for this repository does not have push permission (403). The commit (7320704) exists locally. To land it, someone with write access will need to push it, or the workflow's permissions: contents: write needs to be granted.

[github-actions]

Claude finished @blove's task in 1m 3s —— View job

---

Code Review

• Gather context (PR description, changed files, prior review history)
• Read google-maps-loader.ts — confirmed both prior-flagged issues still present
• Fix 1: Add max-attempts guard to setInterval polling loop
• Fix 2: Add onerror handler on injected <script> tag
• Commit ready — push blocked by repository permissions (see below)

---

Both fixes from the prior two review rounds are applied in commit 66d4a14:

Fix 1 — bounded setInterval poll (google-maps-loader.ts:43):

let attempts = 0;
const poll = setInterval(() => {
  if ((globalThis as { google?: { maps?: unknown } }).google?.maps) {
    clearInterval(poll);
    this.loaded.set(true);
  } else if (++attempts > 100) { // give up after ~10 s
    clearInterval(poll);
  }
}, 100);

Fix 2 — onerror handler on the injected script (google-maps-loader.ts:57):

script.addEventListener('load', () => this.loaded.set(true));
script.addEventListener('error', () => {
  this.started = false; // allow a future retry
  console.error('[GoogleMapsLoader] Failed to load Maps JS API');
});

Push failed: the GitHub Actions token for this repository does not have push permission (403). The commit (66d4a14) exists locally. To land it, someone with write access will need to push it, or the workflow's permissions: contents: write needs to be granted.