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

@suraj, yes it is declared in the app module, and works on other pages that do not use the IonicPage declaration — Phillip Hartin

Dom Slatford Dom Slatford · Accepted Answer · 2017-05-08T07:49:32

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

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

2 Answers