title: More than one element matched on this element - Angular 4
body: <p>Hello I'm trying to recursive display an list, the error I get is:</p>
  
  <pre><code>Uncaught Error: Template parse errors:
  More than one component matched on this element.
  Make sure that only one component's selector can match a given element.
  Conflicting components: TreeNodeComponent,TreeNode ("
      [ERROR -&gt;]&lt;tree-node [node]="categories"&gt;&lt;/tree-node&gt;
    "): ng:///AppModule/TreeView.html@1:4
  </code></pre>
  
  <p>This is how these components looks like:</p>
  
  <pre><code>@Component({
    selector: 'tree-node',
    template: `
    &lt;div&gt;{{node.name}}&lt;/div&gt;
    &lt;ul&gt;
      &lt;li *ngFor="let node of node.children"&gt;
        &lt;tree-node [node]="node"&gt;&lt;/tree-node&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  `
  })
  export class TreeNode {
    @Input() node: AdminCategory[];
  }
  
  
  @Component({
    selector: 'categories',
    template: `
      &lt;tree-node [node]="categories"&gt;&lt;/tree-node&gt;
    `,
  })
  export class TreeView {
    categories: AdminCategory[];
  
    constructor(private store: Store&lt;AppState&gt;, private dialog: MatDialog) {
      store.select('categoryState').subscribe(s =&gt; this.categories = s);
    }
  
    addCategory(category: AdminCategory) {
      this.store.dispatch(new AddCategory(new AdminCategory((category.id + 1), 'qwe', category.id)));
    }
  ....
  </code></pre>
  
  <p>I also added them in declarations in app.module.ts. What is wrong here? I don't get this error message because I didn't declare two same components, the first one is <code>tree-node</code> and the 2nd is <code>categories</code>. </p>