How to fix 'No componentRef found in DetachedRouteHandle'

Question

I am trying to show a modal from a component that sits in a different module than the one where the modal sits. The modal is a navigation modal, so I first load the RootModalComponent that has a router <page-router-outlet></page-router-outlet> and onInit I redirect to the first modal. All this first part works well, but when I close the first modal, I get this error:

CONSOLE ERROR [native code]: ERROR Error: No componentRef found in DetachedRouteHandle

CONSOLE ERROR [native code]: ERROR CONTEXT {
"view": {
"def": {
...
"name": "page-router-outlet",
"attrs": [],
"template": null,
"componentProvider": null,
"componentView": null,
"componentRendererType": null,
"publicP

This error is triggered when I call the method below from the FirstModalComponent:

onClose(): void {
    this.modalParams.closeCallback();
}

The weirdest thing is that when I close the modal from the SecondModalComponent, everything is fine!

I Followed the Nativescript doc: https://docs.nativescript.org/ui/modal-view-ng to implement navigation with modal views, except that my router config is quite different and the RootModalComponent is not being called by a component from the same module.

markers-routing.Module.ts

const routes: Routes = [
    { path: 'first-modal', component: FirstModalComponent },
    { path: 'second-modal', component: SecondModalComponent },
];

@NgModule({
  imports: [NativeScriptRouterModule.forChild(routes)],
  exports: [NativeScriptRouterModule]
})
export class MarkersModalRoutingModule {}

markers.module.ts

@NgModule({
    declarations: [
        FirstModalComponent,
        SecondModalComponent,
        RootModalComponent
    ],
    imports: [
        NativeScriptCommonModule,
        NativeScriptFormsModule,
        MarkersModalRoutingModule
    ],
    schemas: [NO_ERRORS_SCHEMA],
    entryComponents: [
        RootModalComponent
    ]
})
export class MarkersModalModule { }

root-modal.component.ts

export class RootModalComponent implements OnInit {

    constructor(
        private router: RouterExtensions,
        private activeRoute: ActivatedRoute
    ) { }

    ngOnInit() {
        this.router.navigate(['first-modal'], { relativeTo: this.activeRoute });
    }

}

root-modal.component.html

<page-router-outlet></page-router-outlet>

Does someone know a workaround?

Answer 1

Currently, we need a workaround to make it work because there is a bug in the nativescript angular framework (see issue 1774).

Basically, the workaround consists in naming the page-router-outlet inside the root-modal.component.html (in the example below I named it sharedModal). You then use this name to navigate to the other modals.

For example:

this.router.navigate([{ outlets: { sharedModal: ["first-modal"] } }], { relativeTo: this.activeRoute });

Find here a fully developed nativescript playground sample: https://play.nativescript.org/?template=play-ng&id=TkK7sQ&v=5

Answer 2

First of all you should include ModalDialogService in providers. Also I don't think you could load modal dialog routes lazily, it should be part of your current module (in your case HomeModule). You don't have to import HomeModule in app module as it's being loaded lazily from app routing.

Updated Playground