很多失败：模板解析错误：由于它不是'a'的已知属性，因此无法绑定到'routerLink'。因果报错

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]的每个锚，都会重复同样的错误...

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

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

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

UPDATE

我的仪表板组件规格：

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>

我将外部锚定为div，但其他错误仍然存​​在。

Answer 1

实际的RouterLinkDirective非常复杂，并且与RouterModule的其他组件和指令纠缠在一起。它要求挑战性的设置以模拟和在测试中使用。此示例代码中的RouterLinkDirectiveStub用替代版本替换了real指令，该替代版本旨在验证AppComponent template中所见的锚标记布线的类型（例如）。有关更多信息，请访问angular testing docs

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