使用Angular 5时出现no provider for ActivatedRoute错误，求解决

Hey there, I’ve dealt with this exact error back when working with Angular 5—let me break down what’s going wrong and how to fix it step by step.

This error pops up because Angular’s routing system isn’t properly initialized to provide the ActivatedRoute service. Here’s what you need to do:

1. Properly Configure RouterModule in Your AppModule #

You’ve imported Routes and RouterModule, but you’re missing the critical step of initializing the router with your route configuration using RouterModule.forRoot(). This is what tells Angular to set up all the routing services, including ActivatedRoute.

Update your app.module.ts like this:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Routes, RouterModule } from '@angular/router';
// Don't forget to import your components that will be used in routes
import { HomeComponent } from './home/home.component';

// Define your app's route rules here
const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  // Add any other routes your app needs
];

@NgModule({
  imports: [
    BrowserModule,
    // This line is key—initialize the router with your routes
    RouterModule.forRoot(appRoutes)
  ],
  declarations: [HomeComponent],
  bootstrap: [HomeComponent]
})
export class AppModule { }

2. Double-Check Your Component's ActivatedRoute Injection #

Make sure you’re correctly injecting ActivatedRoute into your component’s constructor. It should look something like this:

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

@Component({
  selector: 'app-home',
  template: '<h1>Welcome Home!</h1>'
})
export class HomeComponent {
  constructor(private route: ActivatedRoute) {
    // Example: Access route parameters
    this.route.params.subscribe(params => {
      console.log('Route params:', params);
    });
  }
}

3. If You're Seeing This in Unit Tests #

If the error is happening during testing, you need to provide a mock ActivatedRoute in your test setup, since the real one isn’t available in a test environment. Here’s how to do that:

import { TestBed } from '@angular/core/testing';
import { ActivatedRoute } from '@angular/router';
import { of } from 'rxjs';
import { HomeComponent } from './home.component';

describe('HomeComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [HomeComponent],
      providers: [
        {
          provide: ActivatedRoute,
          useValue: {
            // Mock whatever part of ActivatedRoute your component uses
            params: of({ id: 'test-id' })
          }
        }
      ]
    }).compileComponents();
  });

  // Your test cases go here...
});

A Common Mistake to Avoid #

Never add ActivatedRoute directly to your module’s providers array. It’s automatically provided when you call RouterModule.forRoot(), and manually adding it will cause conflicts.

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