how can i make the injector of route in angular

when i use the router link i have this error :

chunk-PXXAIYND.js?v=9a9432b3:48 ERROR NullInjectorError: R3InjectorError(Standalone[_AppComponent])[ActivatedRoute -> ActivatedRoute -> ActivatedRoute]: NullInjectorError: No provider for ActivatedRoute!

i try to injecte it correctly but still anabel to make it run , this is the code of the angulau prjct :

import { Component ,OnInit} from '@angular/core';
import { ActivatedRoute, RouterModule } from '@angular/router';
import { WeatherService } from '../weather.service';

@Component({
selector: 'app-day',
imports: [ActivatedRoute,WeatherService,RouterModule],
templateUrl: './day.component.html',
styleUrl: './day.component.css'
})
export class DayComponent implements OnInit{
city: string = '';
date: string = '';
hourlyData: any[] = [];

constructor(
private route: ActivatedRoute,
private weatherService: WeatherService
) {}

ngOnInit() {
this.route.params.subscribe((params) => {
this.city = params['city'];
this.date = params['date'];
console.log(`City: ${this.city}, Date: ${this.date}`);
this.getHourlyWeather();
});
}

getHourlyWeather() {
this.weatherService.getWeather(this.city).subscribe({
next: (data) => {
console.log('API Response:', data); // Log the data to inspect the structure
const day = data.forecast.forecastday.find((d: any) => d.date === this.date);
if (day && day.hour && day.hour.length > 0) {
this.hourlyData = day.hour; // Populate hourlyData with hourly forecast
} else {
console.error('No hourly data found for this date.');
this.hourlyData = []; // Set to empty array if no data is found
}
},
error: (err) => {
console.error('Error fetching hourly data:', err);
},
});
}


weather.component.html

<button class="btn btn-secondary" [routerLink]="['/day', day.city, day.date]">Voir Plus</button>


weather.service.ts :

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class WeatherService {
private apiKey = '';
private apiUrl = ''
;

constructor(private http: HttpClient) {}


getWeather(city: string, days: number = 7): Observable<any> {
const url = `${this.apiUrl}?key=${this.apiKey}&q=${city}&days=${days}`;
console.log('API Request URL:', url);
return this.http.get(url);
}
}




app.module.ts :

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import {provideHttpClient } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';
import { DayComponent } from './day/day.component';
import { WeatherComponent } from './weather/weather.component';

const routes: Routes = [
{ path: '', component: WeatherComponent },
{ path: 'day/:city/:date', component: DayComponent },
];
@NgModule({
declarations: [
AppComponent
],

imports: [
BrowserModule ,RouterModule.forRoot(routes),DayComponent,WeatherComponent
],
providers: [provideHttpClient()
],
bootstrap: [AppComponent]
})
export class AppModule {}

Continue reading...