Can't construct a query for the property, since the query selector wasn't defined

Question

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.

Answer 1

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; 

Plunker example