很多失败：模板解析错误：无法绑定到“routerLink”，因为它不是“a”的已知属性。业力错误答案

【问题标题】：Lots of Failed: Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'a'. errors in Karma很多失败：模板解析错误：无法绑定到“routerLink”，因为它不是“a”的已知属性。业力错误
【发布时间】：2020-01-13 15:42:30
【问题描述】：

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] 的锚点，同样的错误会一遍又一遍地出现......

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

我尝试在 spec.ts 中导入 import { RouterTestingModule } from '@angular/router/testing';，但这也无济于事，但我认为这是正确的方法。

P.S 我没有更改 .spec.ts 文件，只有一个例外。

更新

我的仪表板组件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();
  });
});

我的登录组件规范：

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 确实是嵌套了一个锚点：

<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锚改成了div，但是其他的错误依旧存在。

【问题讨论】：

在你的应用模块中导入RouterModule
@VasimHayat 忘记说明我已经这样做了。这显然不能解决问题
重要的不是你的应用模块导入了什么。重要的是失败的单元测试中的测试模块导入了什么。（即 RouterTestingModule 需要在传递给 TestBed.configureTestingModule() 的模块描述的导入中）
@JBNizet 那么我该如何解决呢？
我之前的评论有什么不清楚的地方？ RouterTestingModule 需要在模块描述的导入中传递给 TestBed.configureTestingModule()

标签： angular testing karma-jasmine karma-runner

【解决方案1】：

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

此示例代码中的 RouterLinkDirectiveStub 用替代版本替换了 real 指令，该版本旨在验证 AppComponent template（例如）中看到的锚标记接线类型。

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

【讨论】：

文档很不清楚。我在哪里导入这个router-link-directive-stub.ts？我似乎无法让它工作
哦，让我在您更新的代码中修复 router-link-directive-stub。 @Munchkin
并没有真正解决我的问题，但不想让赏金白白浪费..

【解决方案2】：

对于那些感兴趣的人，解决方案如下 - 我需要导入 RouterTestingModule（以及 ReactiveFormsModule 和 HttpClientTestingModule）并在导入中指定如下所示的路由：

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'}]
      ) ],

对于

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

我需要将 BackendService 声明为提供程序并导入 HttpClientTestingModule。

【讨论】：