Angular 7 Test: NullInjectorError: No provider for ActivatedRoute

Question

Hi have some error with testing my App made with Angular 7. I do not have much experience in angular, so I would need your help+

Error: StaticInjectorError(DynamicTestModule)[BeerDetailsComponent -> ActivatedRoute]: 
  StaticInjectorError(Platform: core)[BeerDetailsComponent -> ActivatedRoute]: 
    NullInjectorError: No provider for ActivatedRoute!

the testing code is like this:

import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
import { BeerDetailsComponent } from './beer-details.component';
import {
  HttpClientTestingModule,
  HttpTestingController
} from '@angular/common/http/testing';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      declarations: [ BeerDetailsComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BeerDetailsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

I really can't find any solution.

Daniele

score 128 · Answer 1 · edited Jan 03 '20 at 14:19

128

You have to import RouterTestingModule

import { RouterTestingModule } from "@angular/router/testing";

imports: [
    ...
    RouterTestingModule
    ...
]

edited Jan 03 '20 at 14:19

Alex Walker

2,337
1
17
32

answered Oct 23 '19 at 09:08

RaulDanielPopa

1,311
1
8
2

When I do this, I start getting the error `NullInjectorError: No provider for ActivatedRoute!` – Ross Brasseaux Jul 03 '20 at 20:24
1

Did you imported this module into the spec file? – RaulDanielPopa Aug 04 '20 at 19:24
I believe the solution was to add a provider for the route, using an anonymous object containing the properties accessed by the test. – Ross Brasseaux Aug 04 '20 at 19:33
This should be the accepted answer – Alfredo A. Feb 10 '22 at 14:54
1

If you are coming to this in 2022 then `RouterTestingModule` now lives in `@angular/common/http/testing` – Mike Poole Jul 04 '22 at 13:56

score 66 · Accepted Answer · answered Dec 06 '18 at 15:12

66

Add the following import

  imports: [ 
    RouterModule.forRoot([]),
    ...
  ],

answered Dec 06 '18 at 15:12

Sachila Ranawaka

39,756
7
56
80

4

where should i import RouterModule.forRoot([]),? – Daniele Caputo Dec 06 '18 at 15:14
6

In the module `import { RouterModule } from '@angular/router';` – Sachila Ranawaka Dec 06 '18 at 15:14
9

RouterModule should not be included in the test files – Arjun Panicker Apr 16 '20 at 11:01
9

thats not a proper solution, by this you need to define all roter module provider params, APP_BASE_HREF token etc. Use instead RouterTestingModule with no router provider declarations – cagcak May 29 '20 at 11:18
Would be a good answer if you stated where the import should be added – NobodySomewhere Dec 10 '20 at 09:34
@daniele-caputo, make sure that you have accepted the currect answer. other answers with import: [RouterTestingModule] resolved my error. – Jifri Valanchery Jan 07 '21 at 06:03
The correct answer is provided by @prathvi-shetty below. – steve.lippert May 12 '21 at 18:26

score 28 · Answer 3 · answered Jul 11 '20 at 10:44

I had this error for some time as well while testing, and none of these answers really helped me. What fixed it for me was importing both the RouterTestingModule and the HttpClientTestingModule.

So essentially it would look like this in your whatever.component.spec.ts file.

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ProductComponent],
      imports: [RouterTestingModule, HttpClientTestingModule],
    }).compileComponents();
  }));

You can get the imports from

import { RouterTestingModule } from "@angular/router/testing";
import { HttpClientTestingModule } from "@angular/common/http/testing";

I dont know if this is the best solution, but this worked for me.

score 22 · Answer 4 · answered Sep 29 '20 at 09:41

This issue can be fixed as follows:

In your corresponding spec.ts file import RouterTestingModule

import { RouterTestingModule } from '@angular/router/testing';

In the same file add RouterTestingModule as one of the imports

 beforeEach(() => {
    TestBed.configureTestingModule({
    imports: [RouterTestingModule],
    providers: [Service]
  });
 });

score 8 · Answer 5 · answered Jan 06 '20 at 19:52

Example of a simple test using the service and ActivatedRoute! Good luck!

    import { async, ComponentFixture, TestBed } from '@angular/core/testing';
    import { RouterTestingModule } from '@angular/router/testing';
    import { HttpClientModule } from '@angular/common/http';
    import { MyComponent } from './my.component';
    import { ActivatedRoute } from '@angular/router';
    import { MyService } from '../../core/services/my.service';


    describe('MyComponent class test', () => {
    let component: MyComponent;
    let fixture: ComponentFixture<MyComponent>;
    let teste: MyComponent;
    let route: ActivatedRoute;
    let myService: MyService;

    beforeEach(async(() => {
        teste = new MyComponent(route, myService);
        TestBed.configureTestingModule({
        declarations: [ MyComponent ],
        imports: [
            RouterTestingModule,
            HttpClientModule
        ],
        providers: [MyService]
        })
        .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(MyComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('Checks if the class was created', () => {
        expect(component).toBeTruthy();
    });

    });

I use everywhere I work, a way to ensure that the application keeps working after some change without breaking my code. — Cherma Ramalho, Sep 11 '20 at 17:00

Angular 7 Test: NullInjectorError: No provider for ActivatedRoute

5 Answers5

Linked