title: Angular 2/Ionic 2, extend ionic component parse errors: More than one component matched on this element
body: <h2>Doubt</h2>
  
  <p>I developed an Ionic 2 application and I would like to create extensions for some components already deployed in Ionic 2.</p>
  
  <h2>Example</h2>
  
  <p>For example, I create ngModule and try to extends <a href="https://github.com/driftyco/ionic/blob/master/src/components/item/item.ts" rel="nofollow noreferrer">ionic item</a>
  but retaining its functionality and interaction with other Ionic components. Make <code>&lt;extended-ion-item&gt;</code> work like <code>&lt;ion-item&gt;</code>, but change <code>&lt;extended-ion-item&gt;</code> template and add new functionality.</p>
  
  <h2>Link to the repository with reproduced problem: <a href="https://github.com/SonyStone/ionicExtend-issue" rel="nofollow noreferrer">https://github.com/SonyStone/ionicExtend-issue</a></h2>
  
  <p><code>extended-item.ts</code></p>
  
  <pre class="lang-typescript prettyprint-override"><code>import { ChangeDetectionStrategy, Component, ElementRef, Renderer, Optional, ViewEncapsulation } from '@angular/core';
  
  import { Config, Form, ItemReorder, Item } from 'ionic-angular';
  
  import { CopyItem } from './copy-item';
  
  @Component({
      selector: 'extended-ion-item',
      template:
      '&lt;ng-content select="[item-left],ion-checkbox:not([item-right])"&gt;&lt;/ng-content&gt;' +
      '&lt;div class="item-inner"&gt;' +
      '&lt;div class="input-wrapper"&gt;' +
      '&lt;ng-content select="ion-label"&gt;&lt;/ng-content&gt;' +
      '&lt;ion-label *ngIf="_viewLabel"&gt;' +
      '&lt;ng-content&gt;&lt;/ng-content&gt;' +
      '&lt;/ion-label&gt;' +
      '&lt;ng-content select="ion-select,ion-input,ion-textarea,ion-datetime,ion-range,[item-content]"&gt;&lt;/ng-content&gt;' +
      '&lt;/div&gt;' +
      '&lt;ng-content select="[item-right],ion-radio,ion-toggle"&gt;&lt;/ng-content&gt;' +
      '&lt;ion-reorder *ngIf="_shouldHaveReorder"&gt;&lt;/ion-reorder&gt;' +
      '&lt;/div&gt;' +
      '&lt;div class="button-effect"&gt;&lt;/div&gt;',
      host: {
          'class': 'item'
      },
      changeDetection: ChangeDetectionStrategy.OnPush,
      encapsulation: ViewEncapsulation.None,
  })
  export class ExtendedItem extends Item {
      constructor(
          form: Form,
          config: Config,
          elementRef: ElementRef,
          renderer: Renderer,
          @Optional() reorder: ItemReorder
      ) {
          super(form, config, elementRef, renderer, reorder);
      }
  }
  </code></pre>
  
  <p><code>module.ts</code></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { IonicModule } from 'ionic-angular';
  import { BrowserModule } from '@angular/platform-browser';
  
  import { ExtendedItem } from './extended-item';
  import { CopyItem } from './copy-item';
  
  
  @NgModule({
      imports: [
          BrowserModule,
          IonicModule,
      ],
      exports: [
          ExtendedItem,
          CopyItem,
      ],
      declarations: [
          ExtendedItem,
          CopyItem,
      ],
  })
  export class IonicExtensionModule { }
  </code></pre>
  
  <h2>Problem</h2>
  
  <p>But I got this error and really do not know how to solve it.</p>
  
  <p><code>console</code></p>
  
  <pre><code>Unhandled Promise rejection: 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: Item,ExtendedItem ("
  
  &lt;ion-content padding&gt;
      [ERROR -&gt;]&lt;ion-item&gt;
              &lt;ion-avatar item-left&gt;
                  &lt;ion-icon name="logo-markdown" style="color: #412159" &gt;&lt;/ion"): HomePage@7:1
  </code></pre>