Can't resolve all parameters for Router: (?, ?, ?, ?, ?, ?, ?) in Angular RC 5 when unit testing

Question

I just upgraded to Angular RC 5 and now all component that uses \'ROUTER_DIRECTIVES\' fails with \'Can\'t resolve all parameters for Router: (?, ?, ?, ?, ?, ?, ?)\' when I t

Answer 1

Try adding RouterModule:

import { ROUTER_DIRECTIVES, Router, RouterModule } from '@angular/router';

beforeEach(() => {
        TestBed.configureTestingModule({
            providers: [
                 ...
                {provide: Router, useClass: RouterModule},
        });
    });

Answer 2

for me it worked to add the RouterTestingModule

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

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

Answer 3

In my case, I had Router in providers and RouterTestingModule in imports. Guess this was causing a conflict. The following configuration worked:

    TestBed.configureTestingModule({
        declarations: [Component],
        imports: [
            RouterTestingModule,             
        ],
        providers: [
         ...         //Remove Router from providers
        ]              

    });

Answer 4

For latest Angular 7, here is the solution that worked for me. The example is copied from latest angular docs.

app/dashboard/dashboard.component.spec.ts (spies)

const routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']);
const heroServiceSpy = jasmine.createSpyObj('HeroService', ['getHeroes']);

TestBed.configureTestingModule({
  providers: [
    { provide: HeroService, useValue: heroServiceSpy },
    { provide: Router,      useValue: routerSpy }
  ]
})

app/dashboard/dashboard.component.spec.ts (navigate test)

it('should tell ROUTER to navigate when hero clicked', () => {

  heroClick(); // trigger click on first inner <div class="hero">

  // args passed to router.navigateByUrl() spy
  const spy = router.navigateByUrl as jasmine.Spy;
  const navArgs = spy.calls.first().args[0];

  // expecting to navigate to id of the component's first hero
  const id = comp.heroes[0].id;
  expect(navArgs).toBe('/heroes/' + id,
    'should nav to HeroDetail for first hero');
});

Answer 5

I was getting the same error, importing RouterTestModule in my imports array, and removing Router/ActivatedRoute from providers and also removing RouterModule from my imports array helped me to get over this issue.

This is how my working version looks like

import { RouterTestingModule } from '@angular/router/testing';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { MyAppComponent } from './my-apppp.component';
import { MyAppService } from '../../../services/my-app.service';
import { NO_ERRORS_SCHEMA} from '@angular/core';

 beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ MyAppComponent ],
      schemas:      [NO_ERRORS_SCHEMA],
      imports: [ FormsModule, RouterTestingModule ],
      providers: [ MyAppService ]
    })
    .compileComponents();
  }));

I know a lot of people already commented in here, but I felt like providing a updated answer would be helpful.

Thanks!

Answer 6

I just had to remove the router from the providers. That was causing the problem for me.