Angular v17 error: NullInjectorError: No provider for ActivatedRoute

Question

I am creating an Angular project and having the following error, which makes my page unable to load: ERROR NullInjectorError: R3InjectorError(Standalone[_AppComponent])[ActivatedRoute -> ActivatedRoute -> ActivatedRoute]: NullInjectorError: No provider for ActivatedRoute!

Since it is Angular v17, I do not have AppModule on it. This is my following code:

app.config.ts

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

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

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)]
};

app.component.ts

import { Component, LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
import { SharedModule } from './shared/shared.module';
import localePT from '@angular/common/locales/pt';

registerLocaleData(localePT);
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SharedModule, RouterOutlet, RouterLink],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [{provide: LOCALE_ID, useValue: 'pt-br'}]
})
export class AppComponent {
  title = "app";
}

app.routes.ts

import { Routes } from '@angular/router';
import { HomeComponent } from './features/pages/home/home.component';

export const routes: Routes = [
    { path: 'home', component: HomeComponent },
    { path: '', redirectTo: 'home', pathMatch: 'full' }
];

Thank you in advance!

I tried adding RouterModule.forRoot(routes) in AppComponent, but no success. I tried to import ActivatedRoute on AppComponent, but it throwed another error: ERROR Error: NG0204: Can't resolve all parameters for ActivatedRoute: (?, ?, ?, ?, ?, ?, ?, ?). I also tried to import ActivateRoute in AppComponent as the following, but it returns: ERROR Error: NG04002: Cannot match any routes. URL Segment: 'home'

import { Component, LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import { ActivatedRoute, RouterLink, RouterOutlet } from '@angular/router';
import { SharedModule } from './shared/shared.module';
import localePT from '@angular/common/locales/pt';
import { routes } from './app.routes';

registerLocaleData(localePT);
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SharedModule, RouterOutlet, RouterLink],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [{provide: LOCALE_ID, useValue: 'pt-br'}, {provide: ActivatedRoute, useValue: routes}]
})
export class AppComponent {
  title = "app";
}

Since Angular v17 does not have AppModule and does not need it, I did not create it.

I am expecting my page to load properly, it is not allowing it to load.

Answer 1

You don't need to provide ActivatedRoute explicitly, it's part of router and is provided inside provideRouter() method. You also don't need to use RouterModule.ForRoot() anywhere in your application - provideRouter() with routes parameter replaces it too. It's actually new way to provide router in standalone component approach

You define appConfig, with provideRouter(routes) in provider array, but do you use it? How does your main.ts look like? It should bootstrap application and use your appConfig providers:

bootstrapApplication(AppComponent, {
  providers: [...appConfig.providers, <your other providers>],
});