Angular Routing Setup

What is Routing Setup in Angular?

The Angular Router maps URL paths to components. Routes are declared as an array, registered with provideRouter, and rendered into a router-outlet placeholder in the template.

Routing Setup example

// app.routes.ts
export const routes: Routes = [
  { path: '', component: HomeComponent, title: 'Internships in India' },
  { path: 'jobs', component: JobListComponent },
  { path: 'jobs/:id', component: JobDetailComponent },
  { path: 'about', component: AboutComponent },
  { path: '**', component: NotFoundComponent },   // must be last
];

// app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)],
};

Where routed components render

<app-header />
<router-outlet />
<app-footer />

Key points to remember

• Routes are matched top to bottom, so the wildcard ** must come last.
• The title property sets the browser tab title per route.
• Paths have no leading slash in the routes array.
• A production server must rewrite unknown paths to index.html.

Common mistakes with Routing Setup

• Placing the wildcard route first, which swallows every URL.
• Forgetting router-outlet, so navigation changes the URL but nothing renders.