angular-multi-layout

Standard IDs

ID	Severity	What it checks
AML-001	P1	Layout markup duplicated per page/route instead of one configurable shell component
AML-002	P1	No layout-selection abstraction (LayoutService) — layout branching scattered in templates
AML-003	P2	Layout preference not persisted — resets on reload
AML-004	P1	Sidebar layout has no responsive/mobile collapse to an overlay/drawer
AML-005	P2	Navigation menu data duplicated separately for header and sidebar variants

---

Check A — Centralized shell component (AML-001)

Detection

1. Glob src/**/*.component.html for repeated structural blocks containing both a <nav>/ header-style menu markup and a <router-outlet> or page-content wrapper appearing in more than one top-level page component.
2. Confirm a single shell exists: look for one component (commonly app-shell, layout-shell, or app.component.html itself) that contains the <router-outlet> all routed pages render into, with header/sidebar markup defined exactly once.
3. Flag any top-level routed component that re-implements its own <header>/<nav> markup instead of relying on the shell wrapping it.

BAD — every page re-implements its own header/nav

<!-- dashboard.component.html -->
<header class="topbar">
  <nav><a routerLink="/dashboard">Dashboard</a><a routerLink="/orders">Orders</a></nav>
</header>
<main><h1>Dashboard</h1></main>

<!-- orders.component.html — duplicated header/nav -->
<header class="topbar">
  <nav><a routerLink="/dashboard">Dashboard</a><a routerLink="/orders">Orders</a></nav>
</header>
<main><h1>Orders</h1></main>

GOOD — one shell component, pages render inside its router-outlet

// app.routes.ts
export const routes: Routes = [
  {
    path: '',
    component: ShellComponent,
    children: [
      { path: 'dashboard', loadComponent: () => import('./dashboard.component').then(m => m.DashboardComponent) },
      { path: 'orders', loadComponent: () => import('./orders.component').then(m => m.OrdersComponent) }
    ]
  }
];

<!-- shell.component.html -->
@if (layout.mode() === 'header') {
  <app-header-layout><router-outlet /></app-header-layout>
} @else {
  <app-sidebar-layout><router-outlet /></app-sidebar-layout>
}

<!-- dashboard.component.html — content only, no header/nav markup -->
<h1>Dashboard</h1>