angular - Karma 中存在大量 Failed : Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'a' . 错误

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.

对于每个内部带有 [routerLink] 的 anchor ，同样的错误会一遍又一遍地发生......

我尝试将 RouterModule 导入到 app.component.ts 和 app.module.ts 中，但似乎没有帮助。我还将其导入到使用 routerLink 的每个 .ts 文件中，但这也没有帮助。

我尝试在spec.ts中导入import { RouterTestingModule } from '@angular/router/testing';，这也没有帮助，但我认为这是正确的方式。

P.S 我没有更改 .spec.ts 文件，但有一个异常(exception)。

更新

我的仪表板组件规范:

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

我的登录组件规范:

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

如您所见，它们是默认测试。

在AppComponent.html@7:27，问题确实是嵌套在 anchor 上:

<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>

我将外部 a anchor 更改为 div，但其他错误仍然存​​在。

Answer 1

真正的RouterLinkDirective相当复杂，并且与RouterModule的其他组件和指令纠缠在一起。在测试中模拟和使用需要具有挑战性的设置。

此示例代码中的 RouterLinkDirectiveStub 使用替代版本替换了实际指令，该版本旨在验证 AppComponent 模板 中看到的 anchor 标记接线类型(例如)。

欲了解更多信息，请访问angular testing docs