I'm currently developing an Angular application that incorporates standalone components. The goal is to set up routing for navigation to the home component. However, I encountered an error when trying to navigate using <a [routerLink]="['/']">. Angular threw the following error:
ERROR Error [NullInjectorError]: R3InjectorError(Environment Injector)[ActivatedRoute -> ActivatedRoute]: NullInjectorError: No provider for ActivatedRoute! ...
The routing configuration in my routes.ts file looks like this:
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;
Here's how I've set up my AppComponent:
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';
}
Additionally, here is my 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 have attempted various solutions but haven't been able to resolve the NullInjectorError issue. Any suggestions or insights would be greatly appreciated as I work with Angular version 17.0.10.