I want to be able to display a component on both the main page and in an ng-bootstrap modal. The link to display the modal is inside another component.
To do this I placed <router-outlet> tags on the main page and inside the modal.
Because the component displayed in the modal needs to include data from the server, I call router.navigate() in the modal's OnInit function.
This all works correctly except that when I close the modal, the links on the main page no longer do anything except change the url displayed on the browser. No errors are displayed when I run it in a debug environment.
Here is a stackblitz I created to demonstrate the problem. Click on a component name in the navigation box to display it on the window. Click on Reset to remove the displayed component. Click on the link inside a displayed component to open the other component in a modal. After the modal is closed, the links in the navigation box at the top no longer do anything except change the url. The modal can be reopened and the link inside the modal will open another modal. In the real application the links send a request to the server and get a response containing the expected data for the component to be opened but do not display the component.
I tried naming the <router-outlet> in the modal component, but I couldn't get that to work at all.
Is there something else I need to do to restore the router functionality when the modal is closed?