I have a basic component that I am working with:
galery.component.ts
import {Component, Input} from '@angular/core';
@Component({
selector: 'galery-component',
templateUrl: 'galery.component.html',
styleUrls: ['galery.component.css']
})
export class GaleryComponent {
@Input() userPosts;
}
Within the HTML file of this component, there is a custom tag which is a selector for another component in my module.
galery.comonent.html
<div class="container">
<post-details class="post-container" *ngFor="let post of userPosts" [singlePost] = "post">
</post-details>
</div>
When attempting to run my test case, it fails at the start with the following error message:
- If 'post-details' is an Angular component and it has 'singlePost' input, then verify that it is part of this module.
- If 'post-details' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
Below is the test code:
test.spec.ts
describe('BannerComponent (inline template)', () => {
let comp: GaleryComponent;
let fixture: ComponentFixture<GaleryComponent>;
let de: DebugElement;
let el: HTMLElement;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ GaleryComponent ],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(GaleryComponent); // test fails at this point
comp = fixture.componentInstance;
de = fixture.debugElement.query(By.css('post-details'));
el = de.nativeElement;
});
I have already added a CUSTOM_ELEMENTS_SCHEMA to my module, but the issue persists. Here is app.module.ts:
app.module.ts
import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import {AppComponent} from './app.component';
import {GaleryComponent} from './Components/galeryComponent/galery.component';
import {PostDetailsComponent} from './Components/postDetailsComponent/post-details-component.component';
@NgModule({
declarations: [
AppComponent,
GaleryComponent,
PostDetailsComponent
],
exports: [GaleryComponent],
imports: [
CommonModule,
NgbModule.forRoot(),
],
providers: [],
bootstrap: [AppComponent],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule {
}
If anyone has any insight into what might be causing this issue, I would greatly appreciate the help. I have looked at similar questions but have not found a solution yet.