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.
Share Improve this question asked Nov 19, 2024 at 14:00 Markex133Markex133 231 silver badge5 bronze badges 2 |2 Answers
Reset to default 1You 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 */
}
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745556665a4632862.html
import {Title} from '@angular/platform-browser', 2.-in constructorconstructor(private title:Title){}3.-and where you want:this.title.setTitle("new Title"). – Eliseo Commented Nov 19, 2024 at 14:17