fix: set tagName on NgView for Angular 21 bootstrap compatibility (#168)

NathanWalker · web-flow · commit 063d7ba419cc · 2026-05-27T10:41:39.000-07:00
diff --git a/packages/angular/src/lib/nativescript-renderer.ts b/packages/angular/src/lib/nativescript-renderer.ts
@@ -274,22 +274,34 @@ class NativeScriptRenderer implements Renderer2 {
     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: any, fallback: string) => {
+      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) as View;
+      return ensureTagName((result || this.rootView) as View, 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: NgView) {
     if (NativeScriptDebug.enabled) {
diff --git a/packages/angular/src/lib/view-util.ts b/packages/angular/src/lib/view-util.ts
@@ -405,6 +405,12 @@ export class ViewUtil {
 
     const ngView = view as NgView;
     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
diff --git a/packages/angular/src/lib/views/invisible-nodes.ts b/packages/angular/src/lib/views/invisible-nodes.ts
@@ -7,6 +7,7 @@ export abstract class InvisibleNode extends View implements NgView {
   meta: { skipAddToDom: boolean };
   nodeType: number;
   nodeName: string;
+  tagName: string;
   // @ts-expect-error setter
   parentNode: NgView;
   nextSibling: NgView;
@@ -20,6 +21,7 @@ export abstract class InvisibleNode extends View implements NgView {
 
     this.nodeType = 1;
     this.nodeName = getClassName(this);
+    this.tagName = this.nodeName;
   }
 
   toString() {
diff --git a/packages/angular/src/lib/views/view-types.ts b/packages/angular/src/lib/views/view-types.ts
@@ -7,6 +7,7 @@ export interface ViewExtensions {
   meta: ViewClassMeta;
   nodeType: number;
   nodeName: string;
+  tagName: string;
   parentNode: NgView;
   nextSibling: NgView;
   previousSibling: NgView;
