Ionic 3: IonicPage cannot use / bind to custom components

Question

Play a little with Ionic 3 new IonicPage , which handles lazy loading and routing, but struggles to get to capture by importing custom components.

If I initialize the page and the corresponding module according to the documents (see below), I get a message that my page template cannot be attached to the properties of my custom components.

Error output :

core.es5.js: 1085 ERROR error: impurity (in promise): error: template analysis errors: You cannot bind to "locations" because this is not a known property of "location-search-input". 1. If "location-search-input" is an Angular component and has a "location" input, check that it is part of this module. 2. If "location-search-input" is a web component, add "CUSTOM_ELEMENTS_SCHEMA" to the "@ NgModule.schemas" of this component to suppress this message. 3. To enable any property, add 'NO_ERRORS_SCHEMA' to the '@ NgModule.schemas' of this component

I simply refer to my custom component in my markup as follows: <location-search-input [locations]="searchLocations"></location-search-input>that worked fine before moving to Ionic 3 and switched to new decorators @IonicPage.

Just for clarity, here is a snippet of my custom component that is locationsdeclared 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 that I should probably declare / import my custom component in the page module, but again I'm not sure. Any advice would be greatly appreciated.

Page module - basic template (according to documents)

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

According to doc (Component Handling) .

, ,      /     components.module.ts(ComponentsModule)      , .

component1/
   component1.ts
   component1.html

component2/
  component2.ts
  component2.html

ComponentsModule

. components.module.ts. CLI, ComponentsModule.

Answer 2

@Sampath @Phillip Hartin .

- , .module.ts IonicModule, ( , component.module.ts, )

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