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>

Can you try removing the square brackets for `routerLinkActive`? — Edric, Nov 23 '17 at 09:43
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/159734/discussion-between-edric-and-govinda-raj). — Edric, Nov 24 '17 at 07:10

score 4 · Answer 1 · answered Nov 27 '17 at 05:50

4

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

Solved the karma error.

answered Nov 27 '17 at 05:50

Govinda raj

613
3
16
31

Solved my issue too. Thanks! – kriskodzi Apr 05 '18 at 14:05

score 3 · Answer 2 · answered Mar 03 '20 at 01:53

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();
  });

});

score 1 · Answer 3 · answered Sep 24 '19 at 07:23

1

You just need this in your test code:

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

Here exportAs is set to 'routerLinkActive'

answered Sep 24 '19 at 07:23

Robert

1,964
1
22
22

this is what i was looking for, we had some existing tests and i didn't want or know if it was possible to convert them over to use RouterTestingModule. thank you! – Jeff Apr 27 '20 at 16:05

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

3 Answers3