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/homeponent';
import {ArtistasPageComponent} from './components/artistas-page/artistas-pageponent';

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)]
};

appponent.ts

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

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

appponent.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: './homeponent.html',
  styleUrl: './homeponent.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/appponent';
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.

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/homeponent';
import {ArtistasPageComponent} from './components/artistas-page/artistas-pageponent';

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)]
};

appponent.ts

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

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

appponent.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: './homeponent.html',
  styleUrl: './homeponent.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/appponent';
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.

• angular

• Someone told me to change the name of the Title, what should it be like? – Markex133 Commented Nov 19, 2024 at 14:03
• 1 related to title, you can define in routes, see the doc or 1.-import {Title} from '@angular/platform-browser', 2.-in constructor constructor(private title:Title){} 3.-and where you want:this.title.setTitle("new Title"). – Eliseo Commented Nov 19, 2024 at 14:17

2 Answers 2

You are bootstrapping the application twice in your main.ts, with different configs. Remove the first call to the bootstrapApplication() function:

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

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


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

To make your HTTP client working, add provideHttpClient() to your app.config.ts:

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

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

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

While using ActivatedRoute in your standalone component, you need to import RouterModule in the decoration section of component.

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

@Component({
  standalone: true,
  selector: 'app-component',
  templateUrl: './exampleponent.html',
  imports: [
     RouterModule,
     ...
  ],
})
export class AppComponent {
/** content of your component */
}