title: Ionic 3: IonicPage can’t use/bind to custom components
body: <p>Having a bit of a play around with Ionic 3's new <a href="http://ionicframework.com/docs/api/navigation/IonicPage/" rel="nofollow noreferrer">IonicPage</a>, which handles lazy loading and routing, but struggling to get to grips with importing custom components.</p>
  
  <p>If I initialise a page, and it's corresponding module as per the docs (see below), I get an error stating that my page template cannot bind to the properties of my custom components.  </p>
  
  <p><strong>Error Output</strong>:</p>
  
  <blockquote>
    <p>core.es5.js:1085 ERROR Error: Uncaught (in promise): Error: Template parse errors:
    Can't bind to 'locations' since it isn't a known property of 'location-search-input'.
    1. If 'location-search-input' is an Angular component and it has 'locations' input, then verify that it is part of this module.
    2. If 'location-search-input' 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</p>
  </blockquote>
  
  <p>I simply reference my custom component in my markup as follows: 
  <code>&lt;location-search-input [locations]="searchLocations"&gt;&lt;/location-search-input&gt;</code>, which worked perfectly well prior to upgrading to Ionic 3 and switching to the new <code>@IonicPage</code> decorators.</p>
  
  <p>Just for clarity here's a snippet of my custom component, in which <code>locations</code> is declared as a property/input.</p>
  
  <pre><code>@Component({selector: 'location-search-input', templateUrl: './location-search-input.component.html'})
  
  export class LocationSearchInput {
  
    @Input() locations: any[] = [];
  
    constructor(public navController: NavController, private googlePlacesService: GooglePlacesService) {
        }
  
  }
  </code></pre>
  
  <p>I have a feeling I am perhaps supposed to declare/import my custom component in the page's Module, but then again I'm not sure. Any advice would be greatly appreciated.</p>
  
  <p><strong>Page Module</strong> - <em>basic template (as per docs)</em></p>
  
  <pre><code>import {NgModule} from "@angular/core";
  import {IonicPageModule} from "ionic-angular";
  import {BrowsePage} from "./browse.page";
  
  
  @NgModule({
    declarations: [BrowsePage],
    imports: [
      IonicPageModule.forChild(BrowsePage),
    ],
    entryComponents: [
      BrowsePage,
    ]
  })
  export class BrowsePageModule {
  }
  </code></pre>