Angular 18, main.ts:8 ERROR NullInjectorError:...

Im trying to setUp a Router, RouterLink on my Angular project, and I keep constantly getting the next error on the website console:

ERROR NullInjectorError: R3InjectorError(Standalone[_AppComponent])[ActivatedRoute -> ActivatedRoute -> ActivatedRoute]:
NullInjectorError: No provider for ActivatedRoute!
at NullInjector.get (core.mjs:1636:21)
at R3Injector.get (core.mjs:3018:27)
at R3Injector.get (core.mjs:3018:27)
at R3Injector.get (core.mjs:3018:27)
at ChainedInjector.get (core.mjs:5289:32)
at lookupTokenUsingModuleInjector (core.mjs:5632:31)
at getOrCreateInjectable (core.mjs:5678:10)
at ɵɵdirectiveInject (core.mjs:11577:17)
at NodeInjectorFactory.RouterLink_Factory [as factory] (router.mjs:6172:85)
at getNodeInjectable (core.mjs:5872:38)


Here is how my code

app.routes.ts:

import { Routes } from '@angular/router';
import {HomeComponent} from './components/home/home.component';
import {ArtistasPageComponent} from './components/artistas-page/artistas-page.component';

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



app.config.ts

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

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

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



app.component.ts

import { Component } from '@angular/core';
import {RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
import {CommonModule} from '@angular/common';
import {HeaderComponent} from './components/header/header.component';
import {NavbarComponent} from './components/navbar/navbar.component';
import {FooterComponent} from './components/footer/footer.component';

@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet, RouterLink, RouterLinkActive, HeaderComponent, NavbarComponent, FooterComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent {
title = 'app-ProyectoArt';
}



app.component.html

<app-header></app-header>

<a class="navbar-brand" href="#">ANGULAR</a>

<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" routerLink="/home" routerLinkActive="active">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/artistas" routerLinkActive="active" >Artistas</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Listas</a>
</li>
</ul>

<router-outlet></router-outlet>
<app-footer></app-footer>



And I dont know if this is important or if something should go here, but here is the home.Component.ts for reference

import { Component } from '@angular/core';

@Component({
selector: 'app-home',
standalone: true,
imports: [],
templateUrl: './home.component.html',
styleUrl: './home.component.scss'
})
export class HomeComponent {}



I have been all morning trying everything I could to make this work, looking on previous projects, following the Angular Routes Documentation, watching for people with who got the same error. But nothing seems to work, I always end up with this error.

I tried adding RouterModule.forRoot(routes) in AppComponent, but I get errors.

If someone can see what am I doing wrong I would be really grateful.

------------UPDATE---------------

I watched my Main.ts again and saw some differences from a clean project I made to check things, and noticed it was different, so I tried something and at least Routes works again.

Main.ts looks like this now.

/// <reference types="@angular/localize" />

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

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


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



On the otherside now I cant connect to the Api I was using HttpClient for, but I guess thats because something I touched trying to fix Routes. Curiously enought, im getting the same Error code. So probably the main problem was with Main.ts on the first place, lets see If I can manage to finish this up.

Continue reading...