Angular路由注入报错：ActivatedRoute无提供者问题求助

核心问题 #

1. 独立组件配置错误：你的DayComponent中使用了imports数组，但未声明standalone: true，同时错误地将ActivatedRoute（路由注入服务）和WeatherService（业务服务）放入imports——该数组仅允许添加Angular组件、指令、管道或模块，不能放可注入服务。
2. 模块声明错误：在AppModule中，你将DayComponent和WeatherComponent放入了imports数组，而非declarations数组（非独立组件需在此声明）。

修复步骤 #

步骤1：修正DayComponent配置 #

将ActivatedRoute和WeatherService从imports中移除，添加standalone: true标记（启用独立组件模式）：

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

@Component({
  selector: 'app-day',
  standalone: true, // 新增独立组件标记
  imports: [RouterModule], // 仅保留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);
        const day = data.forecast.forecastday.find((d: any) => d.date === this.date);
        if (day && day.hour && day.hour.length > 0) {
          this.hourlyData = day.hour;
        } else {
          console.error('No hourly data found for this date.');
          this.hourlyData = [];
        }
      },
      error: (err) => {
        console.error('Error fetching hourly data:', err);
      },
    });
  }
}

步骤2：修正WeatherComponent（同理） #

如果WeatherComponent也是独立组件，同样添加standalone: true并调整imports：

// WeatherComponent示例配置
@Component({
  selector: 'app-weather',
  standalone: true,
  imports: [RouterModule], // 模板用到routerLink需保留
  templateUrl: './weather.component.html',
  styleUrl: './weather.component.css'
})

步骤3：修正AppModule配置 #

使用独立组件模式时，从AppModule的imports中移除DayComponent和WeatherComponent，改用路由懒加载：

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';

const routes: Routes = [
  { path: '', loadComponent: () => import('./weather/weather.component').then(m => m.WeatherComponent) },
  { path: 'day/:city/:date', loadComponent: () => import('./day/day.component').then(m => m.DayComponent) },
];

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

若坚持使用非独立组件模式：

• 移除DayComponent和WeatherComponent中的standalone: true和imports数组
• 将它们添加到AppModule的declarations数组：

@NgModule({
  declarations: [
    AppComponent,
    DayComponent,
    WeatherComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  providers: [provideHttpClient()],
  bootstrap: [AppComponent]
})

额外验证 #

• 确认WeatherService的providedIn: 'root'配置正确，服务会全局自动提供
• 检查路由链接[routerLink]="['/day', day.city, day.date]"中的day.city和day.date是否有有效取值，避免路由参数为空

内容的提问来源于stack exchange，提问作者Houda