複数のコンポーネントとモジュールを含む角度のあるアプリケーションがあります。ここでは、問題を理解しやすくするために、構造を単純化および最小化しようとしました。
アプリの構造
-app
-Core
-donut-card
-donut-card-component.html
-donut-card-component.spec.ts
-donut-card-component.ts
-core.module.ts
-app.module.ts
-......
-......
donut-card.component.html
<div class="card-pf" *ngIf="donutConfig && chartData">
<!-- If a titleLink is provided, wrap the h2 with an anchor tag -->
<a *ngIf="titleLink; else cardTitle" [routerLink]="titleLink">
<ng-container *ngTemplateOutlet="cardTitle"></ng-container>
</a>
<ng-template #cardTitle>
<h2 class="card-pf-title">{{ chartTitle }}</h2>
</ng-template>
<p class="card-pf-utilization-details"></p>
<div class="card-pf-body">
<pfng-donut-chart [chartData]=chartData
[config]=donutConfig>
</pfng-donut-chart>
</div>
</div>
donut-card.component.spec.ts
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { DonutCardComponent } from './donut-card.component';
describe('DonutCardComponent', () => {
let component: DonutCardComponent;
let fixture: ComponentFixture<DonutCardComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
declarations: [ DonutCardComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(DonutCardComponent);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
donut-card.component.ts
import { Component, Input } from '@angular/core';
import { DonutChartConfig } from 'patternfly-ng/chart';
@Component({
selector: 'ssc-donut-card',
templateUrl: './donut-card.component.html'
})
export class DonutCardComponent {
@Input() chartTitle: string;
@Input() titleLink: Array<string>;
@Input() donutConfig: DonutChartConfig;
@Input() chartData: Array<any>;
}
core.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { DonutCardComponent } from './donut-card/donut-card.component';
@NgModule({
imports: [
BrowserModule,
DonutChartModule,
RouterModule
],
declarations: [
DonutCardComponent
],
exports: [
DonutCardComponent
]
})
export class CoreModule {}
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
CoreModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
アプリケーション全体でプロパティ バインディングの問題が原因で、単体テストが失敗します。同じことに関して、スタック オーバーフローから利用できるかなりの数の解決策とチェックを参照しましたが、これまでのところ何もうまくいきませんでした。
Failed: Template parse errors: Can't bind to 'chartTitle' since it isn't a known property of 'ssc-donut-card'. 1. If 'ssc-donut-card' is an Angular component and it has 'chartTitle' input, then verify that it is part of this module. 2. If 'ssc-donut-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<ssc-donut-card [ERROR ->][chartTitle]="chartTitle" [titleLink]="titleLink" [chartData]="chartData" "): ng:///DynamicTestModule/ScoresDonutCardComponent.html@1:2 Can't bind to 'titleLink' since it isn't a known property of 'ssc-donut-card'. 1. If 'ssc-donut-card' is an Angular component and it has 'titleLink' input, then verify that it is part of this module. 2. If 'ssc-donut-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<ssc-donut-card [chartTitle]="chartTitle" [ERROR ->][titleLink]="titleLink" [chartData]="chartData" [donutConfig]="donutConfig" "): ng:///DynamicTestModule/ScoresDonutCardComponent.html@2:2 Can't bind to 'chartData' since it isn't a known property of 'ssc-donut-card'. 1. If 'ssc-donut-card' is an Angular component and it has 'chartData' input, then verify that it is part of this module. 2. If 'ssc-donut-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" [chartTitle]="chartTitle" [titleLink]="titleLink" [ERROR ->][chartData]="chartData" [donutConfig]="donutConfig" </ssc-donut-card> "): ng:///DynamicTestModule/ScoresDonutCardComponent.html@3:2 Can't bind to 'donutConfig' since it isn't a known property of 'ssc-donut-card'. 1. If 'ssc-donut-card' is an Angular component and it has 'donutConfig' input, then verify that it is part of this module. 2. If 'ssc-donut-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" [titleLink]="titleLink" [chartData]="chartData" [ERROR ->][donutConfig]="donutConfig" </ssc-donut-card> "): ng:///DynamicTestModule/ScoresDonutCardComponent.html@4:2 'ssc-donut-card' is not a known element: 1. If 'ssc-donut-card' is an Angular component, then verify that it is part of this module. 2. If 'ssc-donut-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<ssc-donut-card [chartTitle]="chartTitle" [titleLink]="titleLink" "): ng:///DynamicTestModule/ScoresDonutCardComponent.html@0:0