@nativescript/angular 21.0.1-alpha.6 → 21.0.1-alpha.8

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}`;
@@ -3144,6 +3145,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 +3552,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) {
@@ -6399,6 +6419,120 @@ function buildNonAnimatedRestoreConfig(original) {
     return cloned;
 }
 
+/**
+ * Pure helpers that mirror NativeScript's modal-host properties
+ * (`_dialogFragment` on Android, `viewController` on iOS) from the
+ * ContentView wrapper that `attachComponentPortal` presents as the
+ * modal down onto every native-like descendant.
+ *
+ * Why? `parentView.showModal(targetView, ...)` stamps those props on
+ * `targetView` itself — but user template code reads them off the
+ * rendered template root that lives *inside* the wrapper (e.g.
+ * `onLoaded($event)` → `args.object._dialogFragment.getDialog()`).
+ * Without mirroring, every fresh modal open + every HMR
+ * `ɵɵreplaceMetadata` re-render hands the user `undefined`, which is
+ * how we hit:
+ *
+ *   Cannot read properties of undefined (reading 'getDialog')
+ *     at CheckinComponent.onLoaded
+ *
+ * The helpers live in a standalone module on purpose, mirroring
+ * `dialog-hmr-animation.ts`: they don't pull `@angular/core` or
+ * `@nativescript/core`, so they're trivially unit-testable in the
+ * Jest Node runner without an ESM transform or a NativeScript
+ * runtime stub.
+ */
+/**
+ * Marker property used to make {@link installPvcModalHostPropPropagation}
+ * idempotent. Exported only so the spec can assert install
+ * idempotency without re-declaring the constant.
+ */
+const PVC_ADD_VIEW_WRAPPED_MARKER = '__ng_modal_propagate_addview__';
+/**
+ * Mirror `wrapper`'s modal-host props onto every descendant of
+ * `root` via NativeScript's logical `eachChildView` walk.
+ *
+ * - The wrapper itself is **never** written to. NS core owns that
+ *   assignment and we must not shadow the canonical reference.
+ * - Writes are idempotent: a descendant that already holds the same
+ *   reference is skipped, so repeat calls (HMR re-renders, multiple
+ *   PVC adds in one render pass) stay cheap.
+ * - No-op when the modal isn't shown yet, has already closed, or
+ *   when either input is missing. NS clears both props to null on
+ *   close, so propagating after that point would only persist stale
+ *   references on the descendants.
+ */
+function propagateModalHostPropsToDescendants(wrapper, root) {
+    if (!wrapper || !root) {
+        return;
+    }
+    const dialogFragment = wrapper._dialogFragment;
+    const viewController = wrapper.viewController;
+    if (dialogFragment == null && viewController == null) {
+        return;
+    }
+    const visit = (view) => {
+        if (!view) {
+            return;
+        }
+        if (view !== wrapper) {
+            if (dialogFragment !== undefined && view._dialogFragment !== dialogFragment) {
+                view._dialogFragment = dialogFragment;
+            }
+            if (viewController !== undefined && view.viewController !== viewController) {
+                view.viewController = viewController;
+            }
+        }
+        view.eachChildView?.((child) => {
+            visit(child);
+            return true;
+        });
+    };
+    visit(root);
+}
+/**
+ * Idempotently wrap `host._addView` so every child added after
+ * install — typically the new template root produced by Angular's
+ * `ɵɵreplaceMetadata` HMR cycle — has `wrapper`'s modal-host props
+ * mirrored onto it (and its current subtree) **before** NS attaches
+ * the view.
+ *
+ * Why "before"? `_addView` on a loaded parent synchronously calls
+ * `child.callLoaded()` deep inside, which fires the `loaded` event
+ * chain on the new template root. User code (e.g.
+ * `onLoaded($event)` → `args.object._dialogFragment.getDialog()`)
+ * runs from inside that synchronous call. The props **must** be
+ * present on the child by the time `_addView` runs — pre-hook
+ * position is the only place that guarantees this without
+ * monkey-patching NS internals.
+ *
+ * The wrap reads `wrapper._dialogFragment` / `wrapper.viewController`
+ * lazily (per call) via {@link propagateModalHostPropsToDescendants},
+ * so a wrap installed while the modal is open keeps doing the right
+ * thing if HMR re-render happens later, and gracefully no-ops after
+ * the modal closes (both props become null on the wrapper).
+ *
+ * No-op when `host` lacks `_addView` (e.g. a non-View element) or
+ * when the wrap is already installed (`PVC_ADD_VIEW_WRAPPED_MARKER`
+ * sentinel). The wrap is intentionally NOT removable — the host
+ * lives only as long as the modal, so the wrap is GC'd with it.
+ */
+function installPvcModalHostPropPropagation(host, wrapper) {
+    if (!host || !wrapper) {
+        return;
+    }
+    const target = host;
+    if (target[PVC_ADD_VIEW_WRAPPED_MARKER] || typeof target._addView !== 'function') {
+        return;
+    }
+    const origAddView = target._addView.bind(target);
+    target._addView = (view, atIndex) => {
+        propagateModalHostPropsToDescendants(wrapper, view);
+        return origAddView(view, atIndex);
+    };
+    target[PVC_ADD_VIEW_WRAPPED_MARKER] = true;
+}
+
 let NativeModalRef = class NativeModalRef {
     constructor(_config, _injector, location) {
         this._config = _config;
@@ -6528,6 +6662,25 @@ let NativeModalRef = class NativeModalRef {
             },
             cancelable: !this._config.disableClose,
         });
+        // After `showModal`, NativeScript core has stamped
+        // `_dialogFragment` (Android) / `viewController` (iOS) on
+        // `targetView` itself — but user template code (`onLoaded($event)`
+        // → `args.object._dialogFragment.getDialog()...`) reads those
+        // props on the rendered template root, which is a *descendant*
+        // of `targetView`, not `targetView` itself. Mirror them down so
+        // the template root (and any nested loaded handler) sees the
+        // real host objects instead of `undefined`, then install a
+        // lazy wrap on the host PVC's `_addView` so future child
+        // additions — typically the new template root produced by
+        // Angular's `ɵɵreplaceMetadata` HMR cycle — get the same
+        // props mirrored *before* NS attaches the view and fires
+        // its `loaded` event chain. See `modal-host-props.ts` for the
+        // full rationale.
+        propagateModalHostPropsToDescendants(targetView, targetView);
+        const hostView = componentRef.location?.nativeElement;
+        if (hostView) {
+            installPvcModalHostPropPropagation(hostView, targetView);
+        }
         return componentRef;
     }
     _startExitAnimation() {