Impossible de construire une requête pour la propriété, car le sélecteur de requête n'a pas été défini.

Question

J'ai actuellement ce problème avec un composant dans Angular 2 qui existe à partir d'autres composants. Les composants du composant "principal" peuvent exister plusieurs fois dans la hiérarchie.

Mais je reçois cette erreur : "Impossible de construire une requête pour la propriété "navComponent" de "SidenavLinkComponent" car le sélecteur de requête n'a pas été défini"

SidenavLinkComponent:
@ContentChild(SidenavNavComponent) navComponent: SidenavNavComponent;

SidenavNavComponent:
@ContentChildren(SidenavLinkComponent) linkComponents: QueryList<SidenavLinkComponent>;

J'ai réalisé ce slim plunker, où le problème est montré : Plunker

Je ne sais pas pourquoi ça arrive.

Answer 1

C'est à cause d'une dépendance circulaire entre SidenavComponent y SidenavNavComponent . Il peut être résolu en utilisant forwardRef . N'oubliez pas de l'importer également :

import { forwardRef } from '@angular/core';

@ViewChild(forwardRef(() => SidenavNavComponent))
private navComponent: SidenavNavComponent;

Exemple de Plunker

Answer 2

J'ai eu cette erreur en utilisant un enum dans un 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
}

Je ne sais pas encore comment le résoudre, mais j'ai pensé qu'il pourrait être intéressant de le signaler puisque le message d'erreur est complètement faux...