Нет директивы с "exportAs", установленным в "cdkStep"

Question

Я получаю эту ошибку от karma / jasmin в моих spec.ts:

Нет директивы с "exportAs", установленным в "cdkStep"

<!-- Step 1 -->
<cdk-step [ERROR ->]#step1="cdkStep">
    <ng-template cdkStepLabel>
        <div class="step-content">
<!-- Step 2 -->
<cdk-step [ERROR ->]#step2="cdkStep">
    <ng-template cdkStepLabel>
        <div class="step-content">
<!-- Step 3 -->
<cdk-step [ERROR ->]#step3="cdkStep">
    <ng-template cdkStepLabel>
        <div class="step-content">
<!-- Step 4 -->

И я объявил это в моем компоненте:

@ViewChild('step1') private step1: CdkStep;
@ViewChild('step2') private step2: CdkStep;

И это конфигурация TestBed:

    TestBed.configureTestingModule({
        declarations: [ StepsComponent ],
        schemas: [CUSTOM_ELEMENTS_SCHEMA]
    }).compileComponents();

В целом мой код очень похож на этот пример Stackblitz:
https://stackblitz.com/edit/angular-cdk-stepper-demo

Я знаю, что этот вопрос уже задавался несколько раз здесь, на SO, , но ни один из них относительно 'cdkStep' .
Кто-нибудь понял, что у меня естьпропал?Компонент работает нормально - просто я не могу получить простой expect(component).toBeTruthy();, чтобы добиться успеха.

Answer 1

Ваш компонент зависит от компонента cdk-step, который будет доступен в вашем TestBed, как только вы импортируете CdkStepperModule в него.

Поскольку это не так,angular не создает экземпляр CdkStep всякий раз, когда встречает тег cdk-step, так как ассоциация не зарегистрирована.Следовательно, вы не сможете привязать эти переменные шаблона к экземпляру CdkStep, поскольку таких экземпляров просто не существует.

Обычно angular будет жаловаться всякий раз, когда встречает неизвестные / пользовательские теги, бросая типичный some-component is not an angular component, но поскольку вы используете CUSTOM_ELEMENTS_SCHEMA, эта проверка пропускается.

Чтобы зарегистрировать CdkStep с помощью селектора cdk-step, вам необходимо изменить параметры вашей настройки на:

import { CdkStepperModule} from '@angular/cdk/stepper';
...
TestBed.configureTestingModule({
    imports: [CdkStepperModule],
    declarations: [StepsComponent]
}).compileComponents();