@nativescript/angular 21.0.1-alpha.1 → 21.0.1-alpha.2

package/fesm2022/nativescript-angular.mjs

@@ -364,6 +364,7 @@ class NativeScriptDebug {
     static { this.routeReuseStrategyTraceCategory = 'ns-route-reuse-strategy'; }
     static { this.listViewTraceCategory = 'ns-list-view'; }
     static { this.bootstrapCategory = 'bootstrap'; }
+    static { this.hmrTraceCategory = 'ns-ng-hmr'; }
     // TODO: migrate all usage to this - avoids extraneous method executions
     static { this.enabled = Trace.isEnabled(); }
     static isLogEnabled() {
@@ -405,6 +406,12 @@ class NativeScriptDebug {
     static bootstrapLogError(message) {
         Trace.write(message, NativeScriptDebug.bootstrapCategory, Trace.messageType.error);
     }
+    static hmrLog(message) {
+        Trace.write(message, NativeScriptDebug.hmrTraceCategory);
+    }
+    static hmrLogError(message) {
+        Trace.write(message, NativeScriptDebug.hmrTraceCategory, Trace.messageType.error);
+    }
 }
 
 class FrameService {
@@ -1591,11 +1598,9 @@ function runNativeScriptAngularApp(options) {
             if (clearedDetached > 0 ||
                 cleared > 0 ||
                 (clearedLocation && (clearedLocation.outlets > 0 || clearedLocation.states > 0 || clearedLocation.callbacks > 0 || clearedLocation.hadUrlTree))) {
-                console.log('[ng-hmr] cleared Angular route caches before reboot:', {
-                    detachedViews: clearedDetached,
-                    locationState: clearedLocation,
-                    routeFields: cleared,
-                });
+                if (NativeScriptDebug.isLogEnabled()) {
+                    NativeScriptDebug.hmrLog(`cleared Angular route caches before reboot: detachedViews=${clearedDetached} routeFields=${cleared} locationState=${JSON.stringify(clearedLocation)}`);
+                }
             }
         }
         catch { }
@@ -1625,21 +1630,30 @@ function runNativeScriptAngularApp(options) {
         }, 0);
     };
     const setRootView = (ref) => {
-        console.log('[ng-hmr] setRootView called, bootstrapId:', bootstrapId, 'ref type:', ref?.constructor?.name);
+        const traceEnabled = NativeScriptDebug.isLogEnabled();
+        if (traceEnabled) {
+            NativeScriptDebug.hmrLog(`setRootView called bootstrapId=${bootstrapId} refType=${ref?.constructor?.name}`);
+        }
         if (bootstrapId === -1) {
-            // treat edge cases
-            console.log('[ng-hmr] setRootView: bootstrapId is -1, returning early');
+            // edge case: a stale ref racing with a teardown
+            if (traceEnabled) {
+                NativeScriptDebug.hmrLog('setRootView: bootstrapId is -1, returning early');
+            }
             return;
         }
         if (ref instanceof NgModuleRef || ref instanceof ApplicationRef) {
             if (ref.injector.get(DISABLE_ROOT_VIEW_HANDLING, false)) {
-                console.log('[ng-hmr] setRootView: DISABLE_ROOT_VIEW_HANDLING is true, returning');
+                if (traceEnabled) {
+                    NativeScriptDebug.hmrLog('setRootView: DISABLE_ROOT_VIEW_HANDLING is true, returning');
+                }
                 return;
             }
         }
         else {
             if (ref['__disable_root_view_handling']) {
-                console.log('[ng-hmr] setRootView: __disable_root_view_handling is true, returning');
+                if (traceEnabled) {
+                    NativeScriptDebug.hmrLog('setRootView: __disable_root_view_handling is true, returning');
+                }
                 return;
             }
         }
@@ -1647,8 +1661,8 @@ function runNativeScriptAngularApp(options) {
         NativeScriptDebug.bootstrapLog(`Setting RootView ${launchEventDone ? 'outside of' : 'during'} launch event`);
         // TODO: check for leaks when root view isn't properly destroyed
         if (ref instanceof View) {
-            console.log('[ng-hmr] setRootView: ref is View, launchEventDone:', launchEventDone);
-            if (NativeScriptDebug.isLogEnabled()) {
+            if (traceEnabled) {
+                NativeScriptDebug.hmrLog(`setRootView: ref is View, launchEventDone=${launchEventDone}`);
                 NativeScriptDebug.bootstrapLog(`Setting RootView to ${ref}`);
             }
             if (currentOptions.embedded) {
@@ -1665,38 +1679,34 @@ function runNativeScriptAngularApp(options) {
         }
         const view = ref.injector.get(APP_ROOT_VIEW);
         const newRoot = view instanceof AppHostView ? view.content : view;
-        console.log('[ng-hmr] setRootView: view from injector:', view?.constructor?.name, 'newRoot:', newRoot?.constructor?.name);
-        console.log('[ng-hmr] setRootView: launchEventDone:', launchEventDone, 'embedded:', currentOptions.embedded);
-        if (NativeScriptDebug.isLogEnabled()) {
+        if (traceEnabled) {
+            NativeScriptDebug.hmrLog(`setRootView: view=${view?.constructor?.name} newRoot=${newRoot?.constructor?.name} launchEventDone=${launchEventDone} embedded=${!!currentOptions.embedded}`);
             NativeScriptDebug.bootstrapLog(`Setting RootView to ${newRoot}`);
         }
         if (currentOptions.embedded) {
-            console.log('[ng-hmr] setRootView: calling Application.run (embedded)');
+            if (traceEnabled) {
+                NativeScriptDebug.hmrLog('setRootView: calling Application.run (embedded)');
+            }
             Application.run({ create: () => newRoot });
         }
         else if (launchEventDone) {
-            console.log('[ng-hmr] setRootView: calling Application.resetRootView');
-            console.log('[ng-hmr] setRootView: newRoot details:', {
-                type: newRoot?.constructor?.name,
-                nativeView: !!newRoot?.nativeView,
-                parent: newRoot?.parent?.constructor?.name,
-                childCount: newRoot?.getChildrenCount?.() ?? 'N/A',
-            });
+            if (traceEnabled) {
+                NativeScriptDebug.hmrLog(`setRootView: calling Application.resetRootView newRoot type=${newRoot?.constructor?.name} hasNativeView=${!!newRoot?.nativeView} parent=${newRoot?.parent?.constructor?.name} childCount=${newRoot?.getChildrenCount?.() ?? 'N/A'}`);
+            }
             rootTransitionGuard.runApplicationResetRootView(Application, () => newRoot, newRoot?.constructor?.name || 'View');
             refreshRootViewCss(newRoot);
-            console.log('[ng-hmr] setRootView: Application.resetRootView returned');
-            // Check root view after reset
-            setTimeout(() => {
-                const currentRoot = Application.getRootView();
-                console.log('[ng-hmr] setRootView: after reset, getRootView:', {
-                    type: currentRoot?.constructor?.name,
-                    nativeView: !!currentRoot?.nativeView,
-                    childCount: currentRoot?.getChildrenCount?.() ?? 'N/A',
-                });
-            }, 100);
+            if (traceEnabled) {
+                NativeScriptDebug.hmrLog('setRootView: Application.resetRootView returned');
+                setTimeout(() => {
+                    const currentRoot = Application.getRootView();
+                    NativeScriptDebug.hmrLog(`setRootView: post-reset getRootView type=${currentRoot?.constructor?.name} hasNativeView=${!!currentRoot?.nativeView} childCount=${currentRoot?.getChildrenCount?.() ?? 'N/A'}`);
+                }, 100);
+            }
         }
         else {
-            console.log('[ng-hmr] setRootView: setting targetRootView (launch in progress)');
+            if (traceEnabled) {
+                NativeScriptDebug.hmrLog('setRootView: setting targetRootView (launch in progress)');
+            }
             targetRootView = newRoot;
         }
     };
@@ -1708,25 +1718,34 @@ function runNativeScriptAngularApp(options) {
         setRootView(errorTextBox);
     };
     const bootstrapRoot = (reason) => {
-        console.log('[ng-hmr] bootstrapRoot called, reason:', reason);
+        if (NativeScriptDebug.isLogEnabled()) {
+            NativeScriptDebug.hmrLog(`bootstrapRoot called reason=${reason}`);
+        }
         try {
             if (reason === 'hotreload') {
                 resetAngularHmrCompiledComponents(getAngularCoreForHmrReset(i0, globalThis));
             }
             bootstrapId = Date.now();
-            console.log('[ng-hmr] bootstrapRoot: new bootstrapId:', bootstrapId);
+            if (NativeScriptDebug.isLogEnabled()) {
+                NativeScriptDebug.hmrLog(`bootstrapRoot: new bootstrapId=${bootstrapId}`);
+            }
             const currentBootstrapId = bootstrapId;
             let bootstrapped = false;
             let onMainBootstrap = () => {
                 setRootView(mainModuleRef);
             };
             runSynchronously(() => currentOptions.appModuleBootstrap(reason).then((ref) => {
-                console.log('[ng-hmr] appModuleBootstrap resolved, ref:', ref?.constructor?.name);
-                console.log('[ng-hmr] currentBootstrapId:', currentBootstrapId, 'bootstrapId:', bootstrapId);
+                if (NativeScriptDebug.isLogEnabled()) {
+                    NativeScriptDebug.hmrLog(`appModuleBootstrap resolved ref=${ref?.constructor?.name} currentBootstrapId=${currentBootstrapId} bootstrapId=${bootstrapId}`);
+                }
                 if (currentBootstrapId !== bootstrapId) {
-                    // this module is old and not needed anymore
-                    // this may happen when developer uses async app initializer and the user exits the app before this bootstraps
-                    console.log('[ng-hmr] bootstrap ID mismatch, destroying ref');
+                    // The pending bootstrap resolved AFTER another reboot bumped
+                    // bootstrapId. This typically happens when a developer ships
+                    // an async APP_INITIALIZER and the user exits/re-enters the
+                    // app while it's still resolving. Drop this ref.
+                    if (NativeScriptDebug.isLogEnabled()) {
+                        NativeScriptDebug.hmrLog('bootstrap ID mismatch, destroying ref');
+                    }
                     ref.destroy();
                     return;
                 }
@@ -1748,41 +1767,49 @@ function runNativeScriptAngularApp(options) {
                 };
                 runInZone(() => {
                     mainModuleRef = ref;
-                    // Expose ApplicationRef for HMR to trigger change detection
-                    // Check for ApplicationRef by duck-typing since instanceof can fail across module realms
+                    // Expose ApplicationRef for HMR to trigger change detection.
+                    // Check by duck-typing because `instanceof` can fail across
+                    // module realms during HMR — we may be holding a fresh
+                    // ApplicationRef class while `ref` was constructed by an
+                    // earlier (now-evicted) realm copy.
                     const refAny = ref;
                     const isAppRef = refAny && typeof refAny.tick === 'function' && Array.isArray(refAny.components);
-                    console.log('[ng-hmr] ref type check: isAppRef=', isAppRef, 'has tick=', typeof refAny?.tick === 'function', 'has components=', Array.isArray(refAny?.components));
+                    if (NativeScriptDebug.isLogEnabled()) {
+                        NativeScriptDebug.hmrLog(`ref type check isAppRef=${isAppRef} hasTick=${typeof refAny?.tick === 'function'} hasComponents=${Array.isArray(refAny?.components)}`);
+                    }
                     if (isAppRef) {
                         global['__NS_ANGULAR_APP_REF__'] = ref;
-                        // Mark boot complete for the HMR system
                         global['__NS_HMR_BOOT_COMPLETE__'] = true;
-                        // Register bootstrapped components for HMR lookup
                         if (!global['__NS_ANGULAR_COMPONENTS__']) {
                             global['__NS_ANGULAR_COMPONENTS__'] = {};
                         }
-                        // Get the component class from the first bootstrapped component
-                        console.log('[ng-hmr] ApplicationRef components count:', refAny.components?.length);
+                        if (NativeScriptDebug.isLogEnabled()) {
+                            NativeScriptDebug.hmrLog(`ApplicationRef components count=${refAny.components?.length ?? 0}`);
+                        }
                         if (refAny.components && refAny.components.length > 0) {
                             const componentRef = refAny.components[0];
-                            console.log('[ng-hmr] componentRef:', componentRef?.constructor?.name);
-                            console.log('[ng-hmr] componentRef.componentType:', componentRef?.componentType?.name);
-                            // For Angular 17+ standalone components, the component type is on componentRef.componentType
-                            // For older Angular, try componentRef.instance.constructor
+                            if (NativeScriptDebug.isLogEnabled()) {
+                                NativeScriptDebug.hmrLog(`componentRef=${componentRef?.constructor?.name} componentType=${componentRef?.componentType?.name}`);
+                            }
+                            // Angular 17+ standalone: the component class is on
+                            // `componentRef.componentType`. Older Angular keeps it on
+                            // `componentRef.instance.constructor`.
                             let componentType = componentRef?.componentType;
                             if (!componentType && componentRef?.instance) {
                                 componentType = componentRef.instance.constructor;
                             }
                             if (componentType && componentType.name) {
                                 global['__NS_ANGULAR_COMPONENTS__'][componentType.name] = componentType;
-                                console.log('[ng-hmr] Registered component for HMR:', componentType.name);
+                                if (NativeScriptDebug.isLogEnabled()) {
+                                    NativeScriptDebug.hmrLog(`registered component for HMR: ${componentType.name}`);
+                                }
                             }
-                            else {
-                                console.log('[ng-hmr] Could not get componentType name');
+                            else if (NativeScriptDebug.isLogEnabled()) {
+                                NativeScriptDebug.hmrLog('could not resolve componentType name');
                             }
                         }
-                        else {
-                            console.log('[ng-hmr] No components in ApplicationRef');
+                        else if (NativeScriptDebug.isLogEnabled()) {
+                            NativeScriptDebug.hmrLog('no components in ApplicationRef');
                         }
                     }
                     else {
@@ -1958,20 +1985,28 @@ function runNativeScriptAngularApp(options) {
         disposePlatform('hotreload');
     };
     global['__reboot_ng_modules__'] = (shouldDisposePlatform = false) => {
-        console.log('[ng-hmr] __reboot_ng_modules__ called, shouldDisposePlatform:', shouldDisposePlatform);
-        console.log('[ng-hmr] current bootstrapId:', bootstrapId, 'mainModuleRef:', !!mainModuleRef);
+        const traceEnabled = NativeScriptDebug.isLogEnabled();
+        if (traceEnabled) {
+            NativeScriptDebug.hmrLog(`__reboot_ng_modules__ called shouldDisposePlatform=${shouldDisposePlatform} bootstrapId=${bootstrapId} hasMainModuleRef=${!!mainModuleRef}`);
+        }
         try {
             global['__NS_CAPTURE_ANGULAR_HMR_ROUTE__']?.();
         }
         catch { }
         disposeLastModules('hotreload');
-        console.log('[ng-hmr] after disposeLastModules, bootstrapId:', bootstrapId);
+        if (traceEnabled) {
+            NativeScriptDebug.hmrLog(`after disposeLastModules bootstrapId=${bootstrapId}`);
+        }
         if (shouldDisposePlatform) {
             disposePlatform('hotreload');
         }
-        console.log('[ng-hmr] calling bootstrapRoot...');
+        if (traceEnabled) {
+            NativeScriptDebug.hmrLog('calling bootstrapRoot');
+        }
         bootstrapRoot('hotreload');
-        console.log('[ng-hmr] bootstrapRoot returned, new bootstrapId:', bootstrapId);
+        if (traceEnabled) {
+            NativeScriptDebug.hmrLog(`bootstrapRoot returned bootstrapId=${bootstrapId}`);
+        }
     };
     if (isWebpackHot) {
         // Webpack-specific HMR handling
@@ -2224,13 +2259,15 @@ function printNgTree(view) {
 }
 function printChildrenRecurse(parent) {
     const children = parent.firstChild ? [parent.firstChild, ...getChildrenSiblings(parent.firstChild).nextSiblings] : [];
-    console.log(`parent: ${parent}, firstChild: ${parent.firstChild}, lastChild: ${parent.lastChild} children: ${children}`);
-    if (parent.firstChild) {
-        console.log(`----- start ${parent}`);
+    if (NativeScriptDebug.isLogEnabled()) {
+        NativeScriptDebug.viewUtilLog(`parent: ${parent}, firstChild: ${parent.firstChild}, lastChild: ${parent.lastChild} children: ${children}`);
+        if (parent.firstChild) {
+            NativeScriptDebug.viewUtilLog(`----- start ${parent}`);
+        }
     }
     children.forEach((c) => printChildrenRecurse(c));
-    if (parent.firstChild) {
-        console.log(`----- end ${parent}`);
+    if (parent.firstChild && NativeScriptDebug.isLogEnabled()) {
+        NativeScriptDebug.viewUtilLog(`----- end ${parent}`);
     }
 }
 function getChildrenSiblings(view) {
@@ -2252,8 +2289,10 @@ function getChildrenSiblings(view) {
     };
 }
 function printSiblingsTree(view) {
+    if (!NativeScriptDebug.isLogEnabled())
+        return;
     const { previousSiblings, nextSiblings } = getChildrenSiblings(view);
-    console.log(`${view} previousSiblings: ${previousSiblings} nextSiblings: ${nextSiblings}`);
+    NativeScriptDebug.viewUtilLog(`${view} previousSiblings: ${previousSiblings} nextSiblings: ${nextSiblings}`);
 }
 // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
 const propertyMaps = new Map();
@@ -5402,7 +5441,7 @@ function createApplication(options) {
  * @deprecated use runNativeScriptAngularApp instead
  */
 const platformNativeScriptDynamic = function (options, extraProviders) {
-    console.log('platformNativeScriptDynamic is deprecated, use runNativeScriptAngularApp instead');
+    console.warn('platformNativeScriptDynamic is deprecated, use runNativeScriptAngularApp instead');
     options = options || {};
     extraProviders = extraProviders || [];
     const ngRootView = new AppHostView(new Color(options.backgroundColor || 'white'));