Angular Route Providers

By Arvind Rai, May 30, 2023

On this page we will learn to use Route providers in our angular application
1. Angular Route has providers property to configure provider array for this route and its children.
2. The provider will be available for the children loaded by either lazily or eagerly. The lazy loaded children can be configured using loadComponent or loadChildren.
3. The services configured with the Route providers, are available to this route and its sub-routes.
4. The Route provider is used as following.

export const ROUTES: Route[] = [
    {
        path: 'emp',
        component: EmployeeComponent,
        providers: [ 
            EmployeeService
        ]
    },
    ......
];

Route Providers Example

Here we are creating a Angular standalone application that configures Route providers.
routes.constant.ts

import { InjectionToken } from "@angular/core";
import { Route } from "@angular/router";
import { EmployeeComponent } from "src/components/employee.component";
import { Employee } from "src/services/employee";
import { EmployeeService } from "src/services/employee.service";

const TEAM_LEAD: Employee = { id: 100, name: 'Amit', age: 30, city: 'Varanasi' };
export const WELCOME_MESSAGE = new InjectionToken('');

export const ROUTES: Route[] = [
	{
		path: 'emp',
		component: EmployeeComponent,
		providers: [
			EmployeeService,
			{ provide: Employee, useValue: TEAM_LEAD },
			{ provide: WELCOME_MESSAGE, useValue: 'Welcome!' }
		],
		children: [
			{
				path: 'emp-detail/:id',
				loadComponent: () => import('src/components/employee-detail.component')
					.then(mod => mod.EmployeeDetailComponent)
			}
		]
	}
];

employee.component.ts

import { CommonModule } from "@angular/common";
import { Component, Inject, OnInit } from "@angular/core";
import { RouterModule } from "@angular/router";
import { WELCOME_MESSAGE } from "src/constants/routes.constant";
import { Employee } from "src/services/employee";
import { EmployeeService } from "src/services/employee.service";

@Component({
    standalone: true,
    imports: [
        RouterModule,
        CommonModule
    ],
    template: ` 
    <h3>{{message}}</h3>
    <div *ngFor="let e of employees">
      <p>{{e.name}} | <a [routerLink]="['emp-detail', e.id]">View Detail</a> </p>
    </div> 
    <router-outlet></router-outlet>
    `
})
export class EmployeeComponent implements OnInit {
    employees?: Employee[];
    constructor(private service: EmployeeService,
        @Inject(WELCOME_MESSAGE) public message: string) { }
    ngOnInit() {
        this.service.getAllEmployees().subscribe(data => {
            this.employees = data;
        });
    }
}

employee-detail.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { CommonModule } from '@angular/common';
import { switchMap } from 'rxjs/operators';
import { Employee } from '../services/employee';
import { EmployeeService } from '../services/employee.service';

@Component({
    standalone: true,
    imports: [CommonModule],
    template: `
    <div *ngIf="emp">
      <h3>Details</h3>
      {{emp.id}} - {{emp.name}} - {{emp.age}} - {{emp.city}}
      <h3>Team Lead</h3>
      {{teamLead.id}} - {{teamLead.name}} - {{teamLead.age}} - {{teamLead.city}}
    </div>
    `,
    styles: ['div { font-weight: bold}']
})
export class EmployeeDetailComponent implements OnInit {
    emp?: Employee;
    constructor(private route: ActivatedRoute,
        private empService: EmployeeService,
        public teamLead: Employee) { }
    ngOnInit() {
        this.route.params.pipe(
            switchMap((params: Params) => this.empService.getEmployeeById(+params['id']))
        ).subscribe(emp => this.emp = emp);
    }
}

Download the complete source code and run. Find the print screen of the output.