Много ошибок: ошибки синтаксического анализа шаблона: невозможно связать с routerLink, поскольку оно не является известным свойством 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] внутри него ...

Я попытался импортировать RouterModule в app.component.ts И app.module.ts , но это, похоже, не помогает. Я также импортировал его в каждый файл .ts, где используется routerLink, но это тоже не помогло.

Я попытался импортировать import { RouterTestingModule } from '@angular/router/testing'; в spe c .ts, но это тоже не помогло, но я думаю, что это где-то в правильном направлении.

PS Я не изменил .spe c .ts файлы с одним исключением.

ОБНОВЛЕНИЕ

Мой компонент панели мониторинга spe c .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();
  });
});

Мой компонент входа spe c .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();
  });
});

Как вы можете видеть, они являются тестами по умолчанию.

В 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 в этом примере кода заменяет действительную директиву альтернативной версией, предназначенной для проверки типа проводки якорного тега, видимой в AppComponent template (например).

Для получения дополнительной информации посетите angular документы для тестирования

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.