Component Structure

This application follows a route-based component loading strategy inspired by Fuse architecture. Components are loaded via routing using empty-path and componentless routes instead of being hard-coded into templates.

This approach provides high scalability, clean separation of concerns and flexible layout switching.

Component Hierarchy (Logical Flow)

AppComponent
└─ router-outlet
   ├─ FullComponent (main layout)
   │  ├─ Navigation
   │  ├─ Header
   │  ├─ router-outlet
   │  └─ Footer
   │
   ├─ BlankComponent (empty layout)
   │  └─ router-outlet
   │
   └─ PrintLayoutComponent (named outlet)

AppComponent

AppComponent is the entry point of the application.

Responsibilities:

• Bootstraps the Angular application
• Imports global and third-party modules
• Contains the root <router-outlet>

All layouts (Full, Blank, Print) are rendered inside this outlet based on the active route.

Layout Components

Instead of a single LayoutComponent (as in Fuse), this application uses multiple layout components directly:

• FullComponent
• BlankComponent
• PrintLayoutComponent

Layout selection is fully controlled by routing.

FullComponent (Main Layout)

FullComponent is the primary application layout.

Includes:

• Navigation (sidebar)
• Header
• Footer
• Inner <router-outlet> for page content

Used for:

• Dashboards
• Apps
• UI pages
• Users
• Invoice
• FAQ
• Account settings
• Documentation

Routing example:

{
  path: '',
  component: FullComponent,
  canActivate: [AuthGuard],
  children: [
    {
      path: 'dashboards',
      loadChildren: () =>
        import('./pages/dashboards/dashboards.routes')
    },
    {
      path: 'apps',
      loadChildren: () =>
        import('./pages/apps/apps.routes')
    }
  ]
}

This empty-path route loads FullComponent into the AppComponent router-outlet.

BlankComponent (Empty Layout)

BlankComponent is a minimal, empty layout.

Includes:

• router-outlet only

Does NOT include:

• Navigation
• Header
• Footer

Used for standalone pages such as:

• Login
• Authentication flows

Routing example:

{
  path: '',
  component: BlankComponent,
  children: [
    {
      path: 'authentication',
      loadChildren: () =>
        import('./pages/authentication/authentication.routes')
    }
  ]
}

PrintLayoutComponent (Named Outlet)

PrintLayoutComponent is rendered using a named outlet.

Used for:

• Printable pages (e.g. invoice print)

Routing example:

{
  path: 'print',
  outlet: 'print',
  component: PrintLayoutComponent,
  canActivate: [AuthGuard],
  children: [
    {
      path: 'invoice',
      component: InvoicePrintComponent
    }
  ]
}

Route-Based Layout Loading

Key principles:

• Layouts are loaded via routes
• Pages are never hard-coded into layouts
• Each layout contains its own router-outlet
• Feature areas are lazy-loaded
• Empty-path routes control layout activation

This mirrors Fuse’s architecture while being adapted to the application's simplified layout model.

Comparison with Fuse Architecture

Fuse:

• AppComponent
• LayoutComponent
• Selected Layout

This Application:

• AppComponent
• FullComponent / BlankComponent
• Selected automatically via routing

The architectural principle remains the same.

Summary

• AppComponent hosts all layouts
• FullComponent is the main authenticated layout
• BlankComponent is an empty layout
• Layouts are activated via empty-path routes
• Router-outlet chaining enables clean separation
• Architecture is scalable and Fuse-compatible