My approach to achieving your desired outcome involves utilizing a lazy-loaded module for the login component. By leveraging the router's ability to load lazy modules when navigating to specific routes, we can create a modal that triggers the loading of the login component through a named router outlet. While I'm not an expert on named router outlets, the following method has proven to be effective.
Assuming you have a lazy module called LoginModule, with an empty-path route displaying the login component, the root module's routes can be defined as follows:
export const ROUTES: Routes = [
{
path: '',
component: HomeComponent
},
{
path: 'login',
loadChildren: './login/login.module#LoginModule'
},
{
path: 'modal-login',
component: ModalLoginShellComponent,
outlet: 'modal',
children: [
{
path: '',
loadChildren: './login/login.module#LoginModule'
}
]
}
];
The home component will feature a link to open a ModalLoginComponent within a modal interface (similar to the ng-bootstrap example). The template for the ModalLoginComponent would be structured as follows:
<div class="modal-header">
<h4 class="modal-title">Hi there!</h4>
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<router-outlet name="modal"></router-outlet>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>
Of particular importance is the line:
<router-outlet name="modal"></router-outlet>
This enables navigation within the modal to load a route, especially one that triggers the lazy module's loading.
The ngOnInit() function within the ModalLoginComponent's code would initiate the navigation process:
ngOnInit() {
this.router.navigate([{outlets: {'modal': ['modal-login']}}]);
}
By doing so, the ModalLoginShellComponent and its lazily-loaded child route would be loaded within the modal body. The ModalLoginShellComponent merely acts as a placeholder component, with the following template:
<router-outlet></router-outlet>