Угловое 2 Неожиданное значение директивы «не определено»

Question

У меня есть 2 компонента, я хочу, чтобы повторно использовать один в другом, так что это компонент, я хочу, чтобы повторно использовать ExpressionBuilderComponent:

@Component({ 
    selector: 'expression-builder', 
    template: ` 
     <div class="container"> 
      <expression *ngFor="#expression of expressions" [prototypes]="prototypes" [expression]="expression" [expressions]="expressions"></expression> 
      <a class="btn btn-primary" (click)="addExpression()"><i class="glyphicon glyphicon-plus"></i></a> 
     </div> 
    `, 
    directives: [ExpressionComponent] 
}) 

чем у меня ExpressionComponent так:

@Component({ 
    selector: 'expression', 
    template: ` 
    <div class="row"> 
    <!-- First Select --> 
     <div class="col-xs-3"> 
      <select class="form-control" [(ngModel)]="selectedPrototypeSelector" (ngModelChange)="onPrototypeChange()"> 
       <option *ngFor="#p of prototypes" [value]="p.selector"> 
        {{ p.selectorName }} 
       </option> 
      </select> 
     </div> 

<!-- Expression Set selector --> 
    <div *ngIf="prototype?.valueType === 'Set'"> 
     <expression-builder></expression-builder> 
    </div> 

Вот PLUNKR и он должен показать тест два раза, потому что я использую <expression-builder> дважды.

В моем проекте он показывает как пустой элемент, На этом скриншоте вы можете увидеть, как он вынес из:

Может кто-то пожалуйста, помогите мне в этом, как это возможно, что в этом случае работает?

http://www.syntaxsuccess.com/viewarticle/recursive-treeview-in-angular-2.0

Answer 1

Если удалить ExpressionBuilderComponent из директив ошибка уходит:

@Component({ 
    selector: 'expression', 
    ... 
    // directives: [ExpressionBuilderComponent] 
}) 
export class ExpressionComponent implements OnInit { 

, если это необходимо, я не знаю решения. Круговые зависимости AFAIK между классами в TypeScript можно разрешать только с помощью интерфейсов, и я не знаю, как это работает с directives.

Plunker example

BTW: это как ваша Plunker должна была выглядеть. Минимальный пример, который позволяет воспроизвести проблему. Вы добавили много кода, который полностью не связан с проблемой.