Konadu.Dev logoKonadu.Dev

How Fix NullInjectorError: No provider for ActivatedRoute, in Angular

Published on August 13, 2024

how to fix NullInjectorError No provider for ActivatedRoute

Last time we talked about how to test the injectQuery method in Tanstack Query, but for today let's talk about how to fix this classic error: NullInjectorError: No provider for ActivatedRoute.

payment-option.component.spec.ts

copy to clipboard
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PaymentOptionComponent } from './payment-option.component';
import { provideRouter } from '@angular/router';
import { homeRoutes } from '../../home.routes';

describe('PaymentOptionComponent', () => {
	let component: PaymentOptionComponent;
	let fixture: ComponentFixture<PaymentOptionComponent>;

	beforeEach(async () => {
		await TestBed.configureTestingModule({
			imports: [PaymentOptionComponent],
            // Just add provideRouter, to your provider, you can provide an array of routes to the provideRouter as an argument
			providers: [provideRouter([])],
		}).compileComponents();

		fixture = TestBed.createComponent(PaymentOptionComponent);
		component = fixture.componentInstance;
		fixture.detectChanges();
	});

	it('should create', () => {
		expect(component).toBeTruthy();
	});
});

That is it, we are done.

Hey 👋, I believe you enjoyed this shortie (it serves as a note to my future self 😎) and learned something new and valuable. Learn about how to test Router.navigate in Angular here.

You can also follow me on Twitter (or instead X 😂) as I share more tips and tricks to make you improve as a better software engineer.

Until then, happy coding!