Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/kevinrodriguezmorales/siget/llms.txt

Use this file to discover all available pages before exploring further.

Siget comes with Angular Router already wired up and ready to use. The router is registered through the standalone application configuration API — no RouterModule required. All you need to do is add route definitions to app.routes.ts and your application gains full client-side navigation.

​
The Routes Array

Route definitions live in src/app/app.routes.ts. Out of the box the array is empty, giving you a clean slate: 
import { Routes } from '@angular/router';

export const routes: Routes = [];

​
Application Configuration

The router is provided in src/app/app.config.ts via provideRouter, which is passed the exported routes array: 
import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideRouter(routes)
  ]
};
appConfig is consumed by bootstrapApplication in src/main.ts, so the router is active from the very first render.

​
Adding Your First Route

1

Generate a component

Use the Angular CLI to scaffold the component that will serve as your route’s view:
ng generate component home
ng generate component about
2

Import the components in app.routes.ts

Open src/app/app.routes.ts and import the newly generated components at the top of the file:
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
3

Add route definitions

Populate the routes array with path–component pairs. A wildcard redirect ensures unknown URLs fall back gracefully:
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '**', redirectTo: '' }
];
4

Verify the router outlet

<router-outlet /> is already present at the bottom of src/app/app.html. Angular Router uses this element as the insertion point for the matched route’s component — no changes needed.

​
Lazy Loading with loadComponent

For larger applications you can defer loading a component’s JavaScript bundle until the route is actually visited. The following example is illustrative — Siget’s starter app.routes.ts ships with an empty routes array and no lazy-loaded routes. As your project grows, replace the component property with loadComponent and a dynamic import: 
import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: '',
    loadComponent: () =>
      import('./home/home.component').then(m => m.HomeComponent)
  },
  {
    path: 'about',
    loadComponent: () =>
      import('./about/about.component').then(m => m.AboutComponent)
  },
  { path: '**', redirectTo: '' }
];
Angular’s build system automatically splits these into separate chunks, so users only download the code for the routes they visit.
<router-outlet /> is already included at the end of src/app/app.html. It acts as the placeholder where the router renders the component matched by the current URL — you do not need to add it manually.
Generate route components with ng generate component route-name so they are automatically set up as standalone components with SCSS styles, matching the project’s schematic defaults.

Build docs developers (and LLMs) love

Get started for freeTalk to us