angular - Can't bind to 'routerLink' since it isn't a known property of 'a'. ("<header id="header"> - TagMerge
3Can't bind to 'routerLink' since it isn't a known property of 'a'. ("<header id="header">Can't bind to 'routerLink' since it isn't a known property of 'a'. ("<header id="header">

Can't bind to 'routerLink' since it isn't a known property of 'a'. ("<header id="header">

Asked 1 years ago
7
3 answers

When you use the TestBed you are configuring a module from scratch. In your current configuration, all you have is

TestBed.configureTestingModule({
  declarations: [
    AppComponent
  ],
});

So all that's included in the module for the test environment is the AppComponent. Nothing from the AppModule is included.

So you're getting the error because you are missing all the router directives that are included in the RouterModule. You could import the RouterModule, but for tests, you should instead use the RouterTestingModule

import { RouterTestingModule } from '@angular/core/testing'

TestBed.configureTestingModule({
  imports: [
    RouterTestingModule.withRoutes([])
  ],
  declarations: [
    AppComponent
  ],
});

You can add routes to the withRoutes.

See Also:

Source: link

6

This is your app.component.spec.ts

You should also add routerModule there

beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      imports:[RouterModule.forRoot([])] //add the router module here as well
    });
    TestBed.compileComponents();
  });

When you're testing your AppComponent , like I said , you should give the test bed what ever you've given to your root @NgModule , so :

 beforeEach( () => {
    TestBed.configureTestingModule( {
        imports : [
            BrowserModule,
            FormsModule,
            HttpModule,
            RouterTestingModule.withRoutes( [
                { path : '', redirectTo : '/home', pathMatch : 'full' },
                { path : 'home', component : HomeComponent },
                { path : 'about', component : AboutComponent },
                { path : 'experiments', component : ExperimentsComponent },
                { path : '**', component : HomeComponent }
            ] )
        ],
        declarations : [
            AppComponent,
            AboutComponent,
            HomeComponent,
            ExperimentsComponent,
            ExperimentDetailComponent
        ],

        schemas : [
            CUSTOM_ELEMENTS_SCHEMA
        ],
        providers : [
            ExperimentsService,
            StateService
        ]
    } );
    TestBed.compileComponents();
} );

Source: link

0

I had this issue too, and I was using a self-created mock router.

All examples of using/importing the routing, router, RouterTestingModule.withRoutes([]) etc just gave me more errors.

The solution for me was too create a mock for the routerLink directive (I'm not sure where the implementation is found when you don't mock the router but use the RouterTestingModule, probably in the RouterTestingModule itself?)

So in hindsight I could have created the mock myself, but as they say "The real RouterLinkDirective is quite complicated and entangled with other components and directives of the RouterModule. It requires challenging setup to mock and use in tests."

I found the implementation for it at the Angular documentation page here: https://angular.io/guide/testing-components-scenarios#routerlink

As links can go away, I post the code here:

@Directive({
  selector: '[routerLink]'
})
export class RouterLinkDirectiveStub {
  @Input('routerLink') linkParams: any;
  navigatedTo: any = null;

  @HostListener('click')
  onClick() {
    this.navigatedTo = this.linkParams;
  }
}

Source: link

Recent Questions on angular

    Programming Languages