Ionic 3: IonicPage can’t use/bind to custom components

Question

Having a bit of a play around with Ionic 3's new IonicPage, which handles lazy loading and routing, but struggling to get to grips with importing custom components.

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.

Error Output:

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

I simply reference my custom component in my markup as follows: <location-search-input [locations]="searchLocations"></location-search-input>, which worked perfectly well prior to upgrading to Ionic 3 and switching to the new @IonicPage decorators.

Just for clarity here's a snippet of my custom component, in which locations is declared as a property/input.

@Component({selector: 'location-search-input', templateUrl: './location-search-input.component.html'})

export class LocationSearchInput {

  @Input() locations: any[] = [];

  constructor(public navController: NavController, private googlePlacesService: GooglePlacesService) {
      }

}

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.

Page Module - basic template (as per docs)

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 {
}

Answer 1

I just wanted to add to @Sampath answer @Phillip Hartin comment with one key point.

If any of you components use any ionic tags i.e. your components.module.ts will need to import IonicModule aswell, my shared components module looks like this (note not called components.module.ts and not in components folder)

    import { NgModule } from '@angular/core';
    import { IonicModule } from 'ionic-angular';
    import { Component1 } from './component1/component1.component';
    import { Component2 } from './component2/component2.component';
    import { Component3 } from './component3/component3.component';

    @NgModule({
        declarations: [  
            Component1,  
            Component2,
            Component3
        ],
        imports: [
            IonicModule
        ],
        exports: [
            Component1,
            Component2,
            Component3
        ]
    })

    export class SharedModule { }

Answer 2

According to the doc (Handling Components) here.

One module that imports all component classes, no individual modules for each component components/ components.module.ts (ComponentsModule) imports and exports all components the user creates

component1/
   component1.ts
   component1.html

component2/
  component2.ts
  component2.html

Creating a page using generators automatically imports ComponentsModule

Hope above is very clear for you.You have to create your custom component inside the components.module.ts.When you create a page using CLI commands, it'll automatically import ComponentsModule.