许多失败：模板解析错误：无法绑定到“routerLink”，因为它不是“a”的已知属性。 Karma 中的错误

Question

Failed: Template parse errors:
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("nd">
            <img width="25" src="../assets/images/app_logo.jpg">
            <a class="navbar-brand" [ERROR ->][routerLink]="['/avior/dashboard']">&nbsp;&nbsp;=== Application ===</a>
        </a>

"): ng:///DynamicTestModule/AppComponent.html@7:27
...
NullInjectorError: StaticInjectorError[AviorBackendService]: 
  NullInjectorError: No provider for AviorBackendService!
...
Failed: Unexpected pipe 'SearchPipe' imported by the module 'DynamicTestModule'. Please add a @NgModule annotation.
...
Expected undefined to be truthy.

The same error goes over and over again for every a anchor with [routerLink] inside of it...

I tried importing RouterModule into app.component.ts AND app.module.ts, but it does not seem to help. I also imported it into every .ts file where the routerLink is used but that didn't help either.

I tried importing import { RouterTestingModule } from '@angular/router/testing'; in the spec.ts and that didn't help either but I think it's somewhere in the right way.

PS I haven't changed the .spec.ts files with a single exception.

UPDATE

My dashboard component spec.ts:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { DashboardComponent } from './dashboard.component';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ DashboardComponent ]
    })
    .compileComponents();
  }));

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

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

My Login Component spec.ts:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { LoginComponent } from './login.component';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ LoginComponent ]
    })
    .compileComponents();
  }));

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

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

As you can see they're default tests.

At AppComponent.html@7:27 the problem was indeed nested a anchors:

<a class="navbar-brand">
            <img width="25" src="../assets/images/app_logo.jpg">
            <a class="navbar-brand" [routerLink]="['/avior/dashboard']">&nbsp;&nbsp;=== Application ===</a>
    </a>

I changed the outer a anchor to div, but the other errors still persist.

Answer 1

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.

The RouterLinkDirectiveStub in this sample code replaces the real directive with an alternative version designed to validate the kind of anchor tag wiring seen in the AppComponent template (For example).

For more information, visit the angular testing docs

Answer 2

For those interested the solution was the following - I needed to import RouterTestingModule (and also ReactiveFormsModule and HttpClientTestingModule) and in imports specify the routes like the following:

imports: [ ReactiveFormsModule, HttpClientTestingModule, RouterTestingModule.withRoutes(
        [{path: '', redirectTo: 'avior/login', pathMatch: 'full'},

        {path: 'avior', loadChildren: () => import('../avior.module').then(m => m.AviorModule)},
        {path: 'avior/*', redirectTo: '/avior'},

        {path: 'carinae', loadChildren: () => import('../../carinae/carinae.module').then(m => m.CarinaeModule)},
        {path: 'carinae/*', redirectTo: '/carinae'},

        {path: '**', redirectTo: '/avior/404'}]
      ) ],

For

NullInjectorError: StaticInjectorError[AviorBackendService]: 
  NullInjectorError: No provider for AviorBackendService!

I needed to declare the BackendService as a provider and also import HttpClientTestingModule.