There is no directive with "exportAs" set to "routerLinkActive"

Question

I am using the mat nav list component for tab and navigation purpose inside my application. It works perfectly on front end but throws error on test case.

Getting the below error from karma.

 There is no directive with "exportAs" set to "routerLinkActive" ("        *ngFor="let tab of tabs"
             [routerLink]="tab.path"
             [routerLinkActive] [ERROR ->]#rla="routerLinkActive"
             [active]="rla.isActive"
             selectedIndex="0"

component.html

<nav mat-tab-nav-bar>
        <a
            mat-tab-link
            *ngFor="let tab of tabs"
            [routerLink]="tab.path"
            [routerLinkActive] #rla="routerLinkActive"
            [active]="rla.isActive"
            selectedIndex="0"
        >
            <i class="{{tab.icon}}"></i>
            {{ tab.label }}
        </a>
    </nav>

Answer 1

With the referene of Angular 4 Error: No provider for ChildrenOutletContexts in Karma-Jasmine Test thread added the RouterTestingModule.

Solved the karma error.

Answer 2

I think you need to add RouterTestingModule to your tests, at the component level. Like this:

    import { async, ComponentFixture, TestBed } from '@angular/core/testing';
    import { RouterTestingModule } from '@angular/router/testing';
    import { SettingsComponent } from './settings.component';
    import { PageService } from '../../services/page.service';

    import { MaterialModule } from '../shared/material/material.module';

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

      beforeEach(async(() => {
        pageServiceSpy = jasmine.createSpyObj('PageService', ['setPageHeader']);

    TestBed.configureTestingModule({
      declarations: [
        SettingsComponent
      ],
      imports: [
        RouterTestingModule,
        MaterialModule
      ],
      providers: [
        { provide: PageService, useValue: pageServiceSpy}
      ]
    })
    .compileComponents();
  }));

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

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

});

Answer 3

You just need this in your test code:

@Directive({
  selector: '[routerLinkActive]',
  exportAs: 'routerLinkActive'
})
export class RouterLinkActiveDirectiveStub {
}

Here exportAs is set to 'routerLinkActive'