Angular Standalone Component Routing Error: No Provider for ActivatedRoute

Question

I'm working on an Angular applicationAngular.dev tutorial app housing location utilizing the standalone component. My application consists of several standalone components, and I'm trying to add routing to navigate to home component. However, when I attempt to navigate using <a [routerLink]="['/']">, Angular throws the following error:

ERROR Error [NullInjectorError]: R3InjectorError(Environment Injector)[ActivatedRoute -> ActivatedRoute]: NullInjectorError: No provider for ActivatedRoute! at NullInjector.get (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:5627:27) at R3Injector.get (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:6070:33) at R3Injector.get (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:6070:33) at ChainedInjector.get (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:15353:36) at lookupTokenUsingModuleInjector (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:4138:39) at getOrCreateInjectable (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:4186:12) at ɵɵdirectiveInject (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:11990:19) at ɵɵinject (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:918:42) at Module.inject (c:/Users/kanha/Desktop/angular/first-app/node_modules/@angular/core/fesm2022/core.mjs:1002:12) at _AppComponent (c:/Users/kanha/Desktop/angular/first-app/src/app/app.component.ts:25:27) { ngTempTokenPath: null, ngTokenPath: [ 'ActivatedRoute', 'ActivatedRoute' ] }

Here's the routing configuration in my routes.ts file:

import {Routes} from '@angular/router';
import {HomeComponent} from './home/home.component';
import {DetailsComponent} from './details/details.component';

const routeConfig: Routes = [
    {
        path: '',
        component: HomeComponent,
        title: 'Home page',
    },
    {
        path: 'details/:id',
        component: DetailsComponent,
        title: 'Details Page',
    },
];

export default routeConfig;

And this is my AppComponent setup:

import {Component} from '@angular/core';
import { HomeComponent } from './home/home.component';
import { RouterLink, RouterOutlet} from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [HomeComponent, RouterLink, RouterOutlet],
  template: `
    <main>
      <a [routerLink]="['/']">
        <header class="brand-name">
          <img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true" />
        </header>
      </a>
      <section class="content">
        <router-outlet></router-outlet>
      </section>
    </main>
  `,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'homes';
}

This is main.ts file

import {bootstrapApplication, provideProtractorTestingSupport} from '@angular/platform-browser';
import {AppComponent} from './app/app.component';
import { provideRouter } from '@angular/router';
import routeConfig from './app/routes';

bootstrapApplication(AppComponent, {
  providers: [provideProtractorTestingSupport(), provideRouter(routeConfig)]
}).catch((err) => console.error(err));

I've already tried the following based on suggestions and documentation:

• Tried importing RouterModule.forRoot(routeConfig) in main.ts like this

bootstrapApplication(AppComponent, {
  providers: [
                provideProtractorTestingSupport(),
                provideRouter(routeConfig),
                importProvidersFrom(RouterModule.forRoot(routeConfig))
             ]
}).catch((err) => console.error(err));

• Double checking path and component references in the routeConfig
• Searching for any misplaced or missing providers for ActivatedRoute, though it's not explicitly used in the app component.

However, none of these steps resolved the issue. The application still throws the NullInjectorError when attempting to use the routerLink directive in the app component. I'm using Angular version 17.0.10

Has anyone encountered a similar issue or can provide insight into what might be causing this error and how to resolve it?

Answer 1

Your provider should be in app.config.ts, not in main.ts.

Drop main.ts as

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routeConfig } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routeConfig), provideClientHydration()]
};

app.routes.ts

    import {Routes} from '@angular/router';
import {HomeComponent} from './home/home.component';
import {DetailsComponent} from './details/details.component';

export const routeConfig: Routes = [
    {
        path: '',
        component: HomeComponent,
        title: 'Home page',
    },
    {
        path: 'details/:id',
        component: DetailsComponent,
        title: 'Details Page',
    },
];

You can provide your routes via app.config.ts, it is not anymore a modular system.