how to use a router inside a module on angular 14

Question

I am developing a digital magazine and I wanted to separate the admin panel and the actual magazine for performance and security reasons. I researched and asked a bit and lazy loading an admin panel module seemed to be optimal but I don't know how to have a router-outlet inside the module as it is needed to load modules.

my initial app.component.html looked looked like

<div class="main-container" *ngIf="!this.currentUser">
  <div #topB class="top">
    <app-navbar></app-navbar>
  </div>

  <div id="content">
    <router-outlet></router-outlet>
  </div>
  <div><app-footer></app-footer></div>
</div>
<div class="admin-container" *ngIf="this.currentUser">
  <app-admin-panel-home></app-admin-panel-home>
  <router-outlet></router-outlet>
</div>

Is there a way to replicate this while using multiple modules?

my app-routing.module.ts

const routes: Routes = [
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full',
  },
  {
    path: 'adminpanel',
    loadChildren: () =>
      import('./admin-module/admin.module').then((m) => m.AdminModule),
  },
  {
    path: '',
    loadChildren: () =>
      import('./magazine-module/magazine.module').then((m) => m.MagazineModule),
  },
];

my magazine module router module

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'latest', component: ArticleListComponent },
  { path: 'article', component: ArticlePageComponent },
  { path: 'blog', component: BlogHomeComponent },
  { path: 'blog/blog', component: BlogPageComponent },
  { path: '**', component: NotFoundComponent },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
```

my admin panel router

```
const routes: Routes = [
  {
    path: 'administrator-Dashboard',
    component: AdminComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: 'article-dashboard',
        component: ArticleDashboardComponent,
      },
      {
        path: 'category-dashboard',
        component: CategoryDashboardComponent,
      },
      { path: 'authenticate', component: LoginComponent },
    ],
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
```

Answer 1

If i understood what you try to achieve you need nested router outlets. https://stackblitz.com/edit/angular-ivy-pswyt8

Create different routes for your main section and admin. In MainComponent and in AdminComponent create router-outlet same as in the AppComponent .

main.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-main',
  template: `
    <div class="navbar">Header Main</div>
    <h1>Main Component</h1>
    <router-outlet></router-outlet>
    <div class="navbar">Footer</div>
  `,
  styles: [
    `
    :host{padding: 20px; display: block; border: 1px red solid;}
    `,
  ],
})
export class MainComponent {}

admin.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-admin',
  template: `
    <div class="navbar">Header Admin</div>
    <h1>Admin Component</h1>
    <router-outlet></router-outlet>
  `,
  styles: [
    `
    :host{padding: 20px;display: block; border: 1px green solid;}
    `,
  ],
})
export class AdminComponent {}

All child routes of that components will load inside nested routed-outlet. You can display any navbars for main and for admin as you like.

If you want to make it in modules everything works exactly the same, just create components for path where you load children and use router-outlet inside.