feat: hmr cache service along with modal dialog handling

Author: NathanWalker

packages/angular/src/lib/cdk/dialog/native-modal-ref.ts

@@ -29,6 +29,16 @@ export class NativeModalRef {
   portalOutlet: NativeScriptDomPortalOutlet;
   detachedLoaderRef: ComponentRef<DetachedLoader>;
   modalViewRef: NgViewRef<any>;
+  /**
+   * The actual NativeScript view passed to `parentView.showModal(...)`.
+   *
+   * For component portals this is the stable `targetView` ContentView
+   * wrapper that owns the Angular host PVC. For template portals it
+   * remains `modalViewRef.firstNativeLikeView` (the historical
+   * behavior). Keeping a direct reference avoids walking parent
+   * chains when programmatically closing the modal.
+   */
+  modalView?: View;
 
   private _closeCallback: () => void;
   private _isDismissed = false;
@@ -61,11 +71,18 @@ export class NativeModalRef {
     this._closeCallback = once(async () => {
       this.stateChanged.next({ state: 'closing' });
       if (!this._isDismissed) {
-        this.modalViewRef.firstNativeLikeView?.closeModal();
+        // Prefer `modalView` (the actual presented view) over the
+        // legacy `firstNativeLikeView`. Both paths ultimately reach
+        // the same `_closeModalCallback` via parent walk, but going
+        // through the presented view is one hop instead of three and
+        // works even if the rendered first root has been replaced by
+        // an HMR `ɵɵreplaceMetadata` cycle.
+        const closeTarget = this.modalView ?? this.modalViewRef.firstNativeLikeView;
+        closeTarget?.closeModal();
       }
       await this.location?._closeModalNavigation();
       // this.detachedLoaderRef?.destroy();
-      if (this.modalViewRef?.firstNativeLikeView.isLoaded) {
+      if (this.modalViewRef?.firstNativeLikeView?.isLoaded) {
         fromEvent(this.modalViewRef.firstNativeLikeView, 'unloaded')
           .pipe(take(1))
           .subscribe(() => this.stateChanged.next({ state: 'closed' }));
@@ -126,6 +143,15 @@ export class NativeModalRef {
   attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T> {
     this.startModalNavigation();
 
+    // `targetView` is a stable ContentView wrapper we own. The Angular
+    // component's host (a `ProxyViewContainer`) is attached as its
+    // content via the portal outlet below. We present `targetView`
+    // itself as the modal — *not* the first rendered template root —
+    // so that component-level HMR (`ɵɵreplaceMetadata`) can re-render
+    // into the PVC and the modal automatically displays the new
+    // content via the wrapper. Presenting the rendered first root
+    // directly worked for the initial open but left subsequent HMR
+    // updates rendering into a detached PVC, producing a blank modal.
     const targetView = new ContentView();
     this.portalOutlet = new NativeScriptDomPortalOutlet(
       targetView,
@@ -136,15 +162,21 @@ export class NativeModalRef {
     const componentRef = this.portalOutlet.attach(portal);
     componentRef.changeDetectorRef.detectChanges();
     this.modalViewRef = new NgViewRef(componentRef);
+    this.modalView = targetView;
     if (this.modalViewRef.firstNativeLikeView !== this.modalViewRef.view) {
       (<any>this.modalViewRef.view)._ngDialogRoot = this.modalViewRef.firstNativeLikeView;
     }
-    this.modalViewRef.firstNativeLikeView['__ng_modal_id__'] = this._id;
-    // if we don't detach the view from its parent, ios gets mad
-    this.modalViewRef.detachNativeLikeView();
+    // Tag both the wrapper (the actual modal root) and the rendered
+    // first root so `getClosestDialog`'s parent walk finds the modal
+    // id regardless of whether it starts from a view inside the
+    // template or from the wrapper.
+    targetView['__ng_modal_id__'] = this._id;
+    if (this.modalViewRef.firstNativeLikeView) {
+      this.modalViewRef.firstNativeLikeView['__ng_modal_id__'] = this._id;
+    }
 
     const userOptions = this._config.nativeOptions || {};
-    this.parentView.showModal(this.modalViewRef.firstNativeLikeView, {
+    this.parentView.showModal(targetView, {
       context: null,
       ...userOptions,
       closeCallback: async () => {