4

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?

Improve this question

2 Answers 2

Reset to default
6

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

it worked.. but how? where i m missing. do i need some other guide to explore angular. can u recommend?. angular documentation is missing some info i guess.
Angular documentation is not missing anything. You can check router tutorial of Angular.
Thanks..I was using angular.dev tutorial add routes to the app
0 
bootstrapApplication(AppComponent, { providers: [ provideProtractorTestingSupport(), provideRouter(routeConfig), ] }).catch((err) => console.error(err));
Improve this answer

4 Comments

Thanks for the answer but that's what i m using.
u use 'importProvidersFrom(RouterModule.forRoot(routeConfig))', pls remove it
no..i m not using it. i tried using it to resolve the issue. but removed after it did't worked.. i found that on one forum.
you dont need them. you rout ['/'] shows to HomeComponent. Could you pls provide it here?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.