Currently have this problem with a component in Angular 2 that exists of other components. The components of the 'main' component can exist multiple times in the hierarchy.
But i am getting this error: "Can't construct a query for the property "navComponent" of "SidenavLinkComponent" since the query selector wasn't defined"
SidenavLinkComponent:
@ContentChild(SidenavNavComponent) navComponent: SidenavNavComponent;
SidenavNavComponent:
@ContentChildren(SidenavLinkComponent) linkComponents: QueryList<SidenavLinkComponent>;
I have made this slim plunker, where the problem is shown: Plunker
I have no idea why it happens.
It's because of a circular dependency between SidenavComponent and SidenavNavComponent. It can be resolved using forwardRef. Don't forget to import it as well:
import { forwardRef } from '@angular/core';
@ViewChild(forwardRef(() => SidenavNavComponent))
private navComponent: SidenavNavComponent;
I had this error when using an enum in a specfile.
app.component.ts
@Component({
selector: 'mintplayer-ng-bootstrap-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
title = 'ng-bootstrap-demo';
colors = Color; // Comment out this line to make the unit tests succeed
}
app.component.spec.ts
describe('AppComponent', () => {
let fixture: ComponentFixture<AppComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [
// Component to test
AppComponent,
],
imports: [
RouterTestingModule
],
// providers: [
// { provide: Color }
// ]
}).compileComponents();
});
it('should create the app', () => {
fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
});
enum Color {
primary,
secondary,
success,
danger,
warning,
info,
light,
dark,
body,
white,
transparent
}
Don't know yet how to solve it, but I thought it might be interesting to point out since the error message is completely off...