@nativescript/angular 21.0.1-alpha.7 → 21.0.1-alpha.9

package/fesm2022/nativescript-angular.mjs

@@ -22,6 +22,7 @@ class InvisibleNode extends View {
         this.name = name;
         this.nodeType = 1;
         this.nodeName = getClassName(this);
+        this.tagName = this.nodeName;
     }
     toString() {
         return `${this.nodeName}(${this.id})-${this.name}`;
@@ -2533,6 +2534,61 @@ function runNativeScriptAngularApp(options) {
         disposeLastModules('hotreload');
         disposePlatform('hotreload');
     };
+    // Pre-import hook for HMR runtimes. Must be called BEFORE the changed
+    // component modules are re-imported, otherwise their ɵɵdefineComponent
+    // calls fire against the OLD `GENERATED_COMP_IDS` map and Angular emits
+    // a benign-but-noisy NG0912 "Component ID generation collision" warning
+    // for every component the user has touched. Calling
+    // `ɵresetCompiledComponents` here clears the map (and the related
+    // ownerNgModule / verifiedNgModule WeakMaps) so the fresh defs register
+    // into an empty table.
+    //
+    // The post-reboot call inside `bootstrapRoot('hotreload')` remains in
+    // place as a safety net: a project that doesn't wire its HMR runtime to
+    // this hook still gets the reset (just one cycle late, after the warning
+    // has already surfaced).
+    global['__reset_ng_compiled_components__'] = () => {
+        resetAngularHmrCompiledComponents(getAngularCoreForHmrReset(i0, globalThis));
+    };
+    // Suppress benign HMR-induced NG0912 ("Component ID generation collision")
+    // warnings. On a `.ts` edit Angular Live Reload's
+    // `ListenNowComponent_UpdateMetadata` function in the freshly re-imported
+    // module calls `ɵɵreplaceMetadata` → `ɵɵdefineComponent` → `getComponentId`
+    // against a class that shares its name with the just-rebooted instance but
+    // not its identity (one comes from the route-loaded module, the other from
+    // the dynamically-fetched `/@ng/component?c=…` metadata chunk). The check
+    // surfaces every component the user touches as a noisy warning even though
+    // there's no real collision — same logical class, two transient identities
+    // during the HMR cycle.
+    //
+    // Real collisions — different classes that happen to hash to the same id —
+    // produce a warning where `'X' and 'Y'` (different class names) appear in
+    // the message. We only filter when both names match, so genuine duplicates
+    // still reach the user.
+    //
+    // Install once per process; the filter self-detaches if the warning text
+    // changes shape (defensive against future Angular wording tweaks).
+    (() => {
+        const w = global;
+        if (w.__NS_ANGULAR_NG0912_FILTER_INSTALLED__)
+            return;
+        w.__NS_ANGULAR_NG0912_FILTER_INSTALLED__ = true;
+        const origWarn = console.warn.bind(console);
+        // Pattern: "Components 'Foo' and 'Bar' with selector 'xyz'" — capture
+        // both class names and compare. We suppress only when they're identical
+        // (the HMR pseudo-collision signature).
+        const NG0912_NAME_MATCH = /NG0912[\s\S]*?Components '([^']+)' and '([^']+)' with selector/;
+        console.warn = (...args) => {
+            const msg = String(args[0] ?? '');
+            if (msg.includes('NG0912')) {
+                const m = NG0912_NAME_MATCH.exec(msg);
+                if (m && m[1] === m[2]) {
+                    return;
+                }
+            }
+            origWarn(...args);
+        };
+    })();
     global['__reboot_ng_modules__'] = (shouldDisposePlatform = false) => {
         // Bump the global HMR cycle counter so subsequent diagnostic log
         // lines (class registry, dialog services) can be cross-referenced
@@ -3144,6 +3200,12 @@ class ViewUtil {
         }
         const ngView = view;
         ngView.nodeName = name;
+        // Angular 21+ reads `rootElement.tagName.toLowerCase()` during component bootstrap
+        // (`locateHostElement`) to reject `<script>` host elements. Native Views have no
+        // intrinsic `tagName`, so without this assignment the boot throws
+        // `Cannot read properties of undefined (reading 'toLowerCase')`. Mirror DOM
+        // conventions where `tagName` equals `nodeName` for element nodes.
+        ngView.tagName = name;
         ngView.meta = getViewMeta(name);
         // we're setting the node type of the view
         // to 'element' because of checks done in the
@@ -3545,22 +3607,35 @@ class NativeScriptRenderer {
         if (NativeScriptDebug.enabled) {
             NativeScriptDebug.rendererLog(`NativeScriptRenderer.selectRootElement: ${selectorOrNode}`);
         }
+        // Angular 21+ reads `rootElement.tagName.toLowerCase()` after this call
+        // (`locateHostElement`) to reject `<script>` hosts. Guarantee every return
+        // path produces a View with a non-empty string `tagName`; otherwise the
+        // bootstrap throws `Cannot read properties of undefined (reading 'toLowerCase')`.
+        const ensureTagName = (view, fallback) => {
+            if (view && typeof view.tagName !== 'string') {
+                try {
+                    view.tagName = view.nodeName || fallback || 'view';
+                }
+                catch { }
+            }
+            return view;
+        };
         if (selectorOrNode instanceof View) {
-            return selectorOrNode;
+            return ensureTagName(selectorOrNode, '');
         }
         if (selectorOrNode && selectorOrNode[0] === '#') {
             const result = getViewById(this.rootView, selectorOrNode.slice(1));
-            return (result || this.rootView);
+            return ensureTagName((result || this.rootView), selectorOrNode);
         }
         if (typeof selectorOrNode === 'string') {
             const view = this.viewUtil.createView(selectorOrNode);
             if (getFirstNativeLikeView(view) === view) {
                 // view is nativelike!
                 this.appendChild(this.rootView, view);
-                return view;
+                return ensureTagName(view, selectorOrNode);
             }
         }
-        return this.rootView;
+        return ensureTagName(this.rootView, '');
     }
     parentNode(node) {
         if (NativeScriptDebug.enabled) {
@@ -9892,29 +9967,65 @@ function writeAngularHmrRouteState(value, options) {
 function captureAngularHmrPendingStartPath(value, source = 'hmr-reboot') {
     return writeAngularHmrRouteState(value, { pending: true, source });
 }
+/**
+ * Match Angular Router's named-outlet syntax in a serialized URL.
+ *
+ * The router emits named outlets as `(outletName:segments[//otherName:segments])`
+ * — see `DefaultUrlSerializer`. Any URL the captures match `/\(\w+:`
+ * contains at least one named-outlet segment.
+ *
+ * Used to gate the start-path deferral below: when a captured URL has named
+ * outlets it CANNOT be used as the initial-navigation path on the next boot
+ * (the outlet directives are inside child components that don't exist yet at
+ * `router.initialNavigation()` time, so `PageRouterOutlet.activateWith`
+ * returns early with "No outlet found relative to activated route" and the
+ * app renders a white screen).
+ */
+function hasNamedOutletsInUrl(url) {
+    if (typeof url !== 'string') {
+        return false;
+    }
+    return /\([A-Za-z0-9_-]+:/.test(url);
+}
 function readAngularHmrPendingStartPath() {
-    // When a back-stack snapshot exists we boot to the bottom of the stack and
-    // let `replayAngularHmrPendingForwardNavigations` walk the rest. Otherwise
-    // fall back to the legacy single-URL slot so projects without history
-    // tracking still land on the page they were viewing.
+    // HMR-DX policy: restore only the user's CURRENT URL. NativeScript Frames
+    // own the back-stack, not the URL, so walking captured history URLs forward
+    // doesn't reconstruct the page stack — it just causes visible re-navigation
+    // sequences (especially with tab-based named outlets) that the user has to
+    // sit through after every save. We pick the last captured URL as the
+    // restoration target and bail on the history walk entirely. The
+    // `forward-navigations` reader returns at most one URL (the deferred
+    // named-outlet case), so the replay service performs zero or one
+    // post-bootstrap navigation, not N.
     const pendingHistory = readHistoryArray(PENDING_HISTORY_KEY);
     if (pendingHistory.length > 0) {
-        // Open the restoring-route window so user-app default navigations
-        // can step out of the framework's way until replay completes. The
-        // forward-navigation walk in `NativeScriptAngularHmrRouteReplay`
-        // closes the window after the final URL lands or fails. We pass
-        // the deepest captured URL so consumers can compare against the
-        // active router URL if they want fine-grained suppression.
-        beginAngularHmrRouteRestore(pendingHistory[pendingHistory.length - 1]);
-        return pendingHistory[0];
+        const target = pendingHistory[pendingHistory.length - 1];
+        beginAngularHmrRouteRestore(target);
+        // Named-outlet URLs cannot be served as the initial navigation URL.
+        // The outlet directives (e.g. `<page-router-outlet name="listenNowTab">`)
+        // live inside child components that only render AFTER the primary
+        // outlet activates. On `router.initialNavigation()` with a URL like
+        // `/(listenNowTab:listen-now)`, Angular tries to activate `listenNowTab`
+        // immediately and `PageRouterOutlet.activateWith` returns early because
+        // no outlet is registered yet — white screen. Defer to a single forward
+        // navigation that fires AFTER the first NavigationEnd, by which time the
+        // outlet directives have registered.
+        if (hasNamedOutletsInUrl(target)) {
+            return '/';
+        }
+        return target;
     }
     const g = getGlobalState();
     const fallback = normalizeAngularHmrRouteUrl(g[PENDING_START_PATH_KEY]?.url ?? g[PENDING_START_PATH_KEY]) || '';
     if (fallback) {
-        // Single-URL fallback path: user-app code should still suppress
-        // default navigations briefly — the new bootstrap is about to
-        // navigate to `fallback`, so a default tab init that fires first
-        // would still stomp it.
+        // Same deferral as above for the legacy single-URL slot.
+        if (hasNamedOutletsInUrl(fallback)) {
+            beginAngularHmrRouteRestore(fallback);
+            // Stash the deferred URL so the forward-navigations reader picks it
+            // up after the initial '/' navigation lands.
+            writeHistoryArray(PENDING_HISTORY_KEY, [fallback]);
+            return '/';
+        }
         beginAngularHmrRouteRestore(fallback);
     }
     return fallback;
@@ -10067,15 +10178,29 @@ function readAngularHmrPendingRouteHistory() {
 }
 /**
  * Read URLs to navigate forward through after the initial navigation finishes.
- * The first entry of the stack is the `START_PATH` consumed by the router; the
- * rest are forward navigations to push onto the new back-stack.
+ *
+ * HMR-DX policy: at most one post-bootstrap navigation. We only need a forward
+ * navigation when `readAngularHmrPendingStartPath` had to return '/' because
+ * the user's current URL contains named outlets (the outlet directives don't
+ * exist yet at initial-navigation time, so we defer to a single nav after the
+ * primary outlet has registered them). For URLs with no named outlets the
+ * start path IS the user's current URL and no forward step is needed.
+ *
+ * We intentionally do NOT walk the captured back-stack of intermediate URLs —
+ * NativeScript Frames own the page stack, not the URL serializer, so URL
+ * replay never reconstructs the Frame stack anyway and only creates visible
+ * mid-save re-navigations.
  */
 function readAngularHmrPendingForwardNavigations() {
     const pending = readHistoryArray(PENDING_HISTORY_KEY);
-    if (pending.length <= 1) {
+    if (pending.length === 0) {
         return [];
     }
-    return pending.slice(1);
+    const target = pending[pending.length - 1];
+    if (hasNamedOutletsInUrl(target)) {
+        return [target];
+    }
+    return [];
 }
 /**
  * Clear the pending snapshot. The router replay calls this once it finishes
@@ -10169,14 +10294,18 @@ function endAngularHmrRouteRestore() {
  */
 const REPLAY_COMPLETED_GRACE_MS = 1000;
 /**
- * Replays the back-stack snapshot captured by `NativeScriptAngularHmrRouteTracker`
- * during HMR. The router's initial navigation already lands on the bottom of
- * the stack (`stack[0]`); this service walks `stack[1..n]` so the user keeps
- * back navigation across HMR cycles.
+ * Restores the user's CURRENT URL after an HMR reboot.
+ *
+ * HMR-DX policy: at most one post-bootstrap navigation. The framework no
+ * longer walks the captured back-stack (`stack[1..n]`) — NativeScript Frames
+ * own the page stack, not the URL serializer, so the URL walk never rebuilt
+ * the Frame stack anyway, it only created visible mid-save re-navigation
+ * sequences (especially with tab-based named outlets) that the user had to
+ * sit through. Now `readAngularHmrPendingForwardNavigations()` returns at
+ * most one URL — the deferred named-outlet case — and we replay only that.
  *
- * The replay is single-shot per bootstrap. Any failure (cancelled navigation,
- * unrouteable URL) aborts the rest of the replay so we don't fight the router
- * — the user keeps whichever subset of the stack we successfully re-pushed.
+ * Any failure (cancelled navigation, unrouteable URL) closes the restoring
+ * window with `replay-aborted` so default navigations can resume.
  */
 class NativeScriptAngularHmrRouteReplay {
     constructor(router) {