title: creating a common header element for ionic app throws error in --prod build
body: <p>I have been working on an ionic 3 app, which has some pages with a common header only with some minor difference of elements inside the header. To avoid code duplication and keep myself DRY I tried to create a reusable component for this header and included it in every page required.</p>
  
  <p>In this component, I have few properties, which I am using to control the differences of elements via property binding. Everything works fine in the development build. But today when I tried to create a --prod build, it shows me the following error.</p>
  
  <pre><code>Error: Template parse errors:
  Can't bind to 'isHome' since it isn't a known property of 'ion-header'.
  1. If 'ion-header' is an Angular component and it has 'isHome' input, then verify that it is part of this module.
  2. If 'ion-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
    Ionic pages and navigation.
  --&gt;
  &lt;ion-header clean-header [ERROR -&gt;][isHome]="true" (refresh)="refresh($event);"&gt;&lt;/ion-header&gt;
  </code></pre>
  
  <p>I'll attach the code below, individual files, I understand this is an issue because of my misunderstanding of angular4 / ionic3's dependency injection and template binding structure. But I can't understand the given error, I tried the 3 solutions listed in the error itself, But I am still missing something and the error stays the same.</p>
  
  <p>app.module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { ErrorHandler, NgModule } from '@angular/core';
  import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
  import { SplashScreen } from '@ionic-native/splash-screen';
  import { HTTP_INTERCEPTORS } from '@angular/common/http';
  import { HttpClientModule } from '@angular/common/http';
  import { StatusBar } from '@ionic-native/status-bar';
  import { LaunchNavigator} from '@ionic-native/launch-navigator';
  
  import { MyApp } from './app.component';
  import { Header } from '../pages/header/header';
  import { HomePage } from '../pages/home/home';
  import {AssignmentDetailPage} from '../pages/assignment-detail/assignment-detail';
  import { LoginPage } from '../pages/login/login';
  import {ReportIssuePage} from '../pages/report-issue/report-issue';
  import { AuthServiceProvider } from '../providers/auth-service/auth-service';
  import { BaseUrl, Base } from './config/config.constants';
  import { LoadingInterceptor } from '../interceptors/loading.interceptor';
  import { DataStoreProvider } from '../providers/data-store/data-store';
  import { HomeServiceProvider } from '../providers/home-service/home-service';
  import { SessionInterceptor } from '../interceptors/session.interceptor';
  import { AssignmentStatusProvider } from '../providers/assignment-status/assignment-status';
  import { Camera } from '@ionic-native/camera';
  import { File} from '@ionic-native/file';
  
  
  @NgModule({
    declarations: [
      MyApp,
      HomePage,
      LoginPage,
      Header,
      AssignmentDetailPage,
      ReportIssuePage
    ],
    imports: [
      BrowserModule,
      HttpClientModule,
      IonicModule.forRoot(MyApp, {
        mode : 'md',
      })
    ],
    bootstrap: [IonicApp],
    entryComponents: [
      MyApp,
      HomePage,
      LoginPage,
      AssignmentDetailPage,
      ReportIssuePage
    ],
    providers: [
      StatusBar,
      SplashScreen,
      {provide: ErrorHandler, useClass: IonicErrorHandler},
      {provide:Base, useValue:BaseUrl},
      {provide: HTTP_INTERCEPTORS, useClass: LoadingInterceptor, multi:true},
      {provide: HTTP_INTERCEPTORS, useClass: SessionInterceptor, multi:true},
      AuthServiceProvider,
      DataStoreProvider,
      Camera,
      File,
      HomeServiceProvider,
      AssignmentStatusProvider,
      LaunchNavigator,
    ]
  })
  export class AppModule {}
  </code></pre>
  
  <p>header.module.ts</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Header } from './header';
  
  @NgModule({
    declarations: [
      Header,
    ],
    imports: [
    ],
    exports: [
      Header
    ]
  })
  export class HeaderModule {}
  </code></pre>
  
  <p>header.ts</p>
  
  <pre><code>import { Component, EventEmitter, Input, Output } from '@angular/core';
  import { AuthServiceProvider } from '../../providers/auth-service/auth-service';
  import { AlertController, NavController } from 'ionic-angular';
  import { HomePage } from '../home/home';
  import { LoginPage } from '../login/login';
  import { HomeServiceProvider } from '../../providers/home-service/home-service';
  
  @Component({
    selector: '[clean-header]',
    templateUrl: 'header.html',
  })
  export class Header {
    @Input() isHome: boolean = false;
    @Output() refresh: EventEmitter&lt;any&gt; = new EventEmitter();
    public user: any;
    constructor(public Auth: AuthServiceProvider, public nav: NavController,
       public alertCtrl: AlertController, public HomeService: HomeServiceProvider) {
  
      this.user = Auth.getUserData();
    }
  </code></pre>
  
  <p>header.html</p>
  
  <pre><code>  &lt;ion-navbar hideBackButton&gt;
      &lt;div text-center&gt;
      &lt;img class="header-logo" src="./assets/imgs/clean_connect.png" alt="Logo of clean connect"&gt;
      &lt;/div&gt;
      &lt;ion-grid&gt;
        &lt;ion-row&gt;
          &lt;ion-col col-8&gt;
            &lt;div class="name-section"&gt;
              &lt;h4 class="header-username"&gt;{{user.userName | uppercase}}&lt;/h4&gt;
              &lt;p&gt;{{user.firstName +', '+ user.lastName}}&lt;/p&gt;
            &lt;/div&gt;
          &lt;/ion-col&gt;
          &lt;ion-col col-4 class="nav-controls"&gt;
            &lt;a (click)="refreshData()" *ngIf="isHome"&gt;&lt;img src="./assets/imgs/ic_refresh.png"   alt="Logo of Refresh"&gt;&lt;/a&gt;
            &lt;a (click)="goHome();" *ngIf="!isHome"&gt;&lt;img src="./assets/imgs/home.png"   alt="Logo of Home"&gt;&lt;/a&gt;
            &lt;a (click)="logout()"&gt;&lt;img src="./assets/imgs/logout.png"   alt="Logo of Logout"&gt;&lt;/a&gt;
          &lt;/ion-col&gt;
          &lt;ion-col col-2 class="nav-controls"&gt;
  
          &lt;/ion-col&gt;
        &lt;/ion-row&gt;
      &lt;/ion-grid&gt;
    &lt;/ion-navbar&gt;
  </code></pre>
  
  <p>finally I am using this component in other places like this,</p>
  
  <p>home.html</p>
  
  <pre><code>&lt;ion-header clean-header [isHome]="true" (refresh)="refresh($event);"&gt;&lt;/ion-header&gt;
  &lt;ion-content&gt;
  </code></pre>
  
  <p>I tried to use it as a custom element rather than an attribute, But it doesn't produce the desired layout due to an custom element sits between ion-header and ion-content, and I can't find the way to use transclusion like the way in angular1.</p>
  
  <p>I know this question is pretty long, But I can't make a working fiddle. can anyone help me?</p>