Import error autocomplete ionic

I know it is something simple to solve but I can not see where my problem is, I have already updated and I follow exactly what is in the documentation, besides this I already have an example working in the same project of auto complete but I really do not know what is happening .

My first example is in the home and everything works and the other one is in another totally different component.

The error that appears in the log console is:

Unhandled Promise rejection: Template parse errors:
Can't bind to 'dataProvider' since it isn't a known property of 'ion-auto-complete'.
1. If 'ion-auto-complete' is an Angular component and it has 'dataProvider' input, then verify that it is part of this module.
2. If 'ion-auto-complete' 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. ("
    <!--&gt;</ion-auto-complete>-->

    <ion-auto-complete [ERROR ->][dataProvider]="cityIndicationAutoCompleteService" #serachcities></ion-auto-complete>


"): ng:///CityIndicationPageModule/CityIndicationPage.html@56:23
'ion-auto-complete' is not a known element:
1. If 'ion-auto-complete' is an Angular component, then verify that it is part of this module.
2. If 'ion-auto-complete' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
    <!--&gt;</ion-auto-complete>-->

    [ERROR ->]<ion-auto-complete [dataProvider]="cityIndicationAutoCompleteService" #serachcities></ion-auto-comple"): ng:///CityIndicationPageModule/CityIndicationPage.html@56:4 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
Can't bind to 'dataProvider' since it isn't a known property of 'ion-auto-complete'.

My html code looks like this:

<ion-auto-complete [dataProvider]="cityIndicationAutoCompleteService" #serachcities></ion-auto-complete>

My ts file has the following lines:

/**
   * Variable that identifies the search bar
   */
  @ViewChild('serachcities')
  serachcities: AutoCompleteComponent;

  public states: any[] = [];
  public cities: any[] = [];
  constructor(public citiesIndication: CitiesIndication,
              public cityIndicationAutoCompleteService: CityIndicationAutoCompleteService
  ) {
    this.getStatesAndCities();
  }

In addition you have made the following import into it.

@Component({
  selector: 'page-city-indication',
  templateUrl: 'city-indication.html',
  providers: [CitiesIndication, CityIndicationAutoCompleteService]
})

In my app.module this way imports:

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    AutoCompleteModule,
    ...
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    ...
  ],
  providers: [
    ...
    CityIndicationAutoCompleteService
  ]
})

My service looks like this:

import {AutoCompleteService} from 'ionic2-auto-complete';
import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';
import {CitiesIndication} from "./cities-indication";

@Injectable()
export class CityIndicationAutoCompleteService implements AutoCompleteService {
  labelAttribute = "cities";

  public listCitiesByStates: any[] = [];

  constructor(public http: Http,
              public citiesIndication: CitiesIndication) {
  }


  getCitiesByStates() {
    this
      .citiesIndication
      .getAllState()
      .subscribe((data: any) => {
        this.listCitiesByStates = data;
      });
  }

  getResults(keyword: string) {
    this.getCitiesByStates();
    let list = [];
    if (keyword.length >= 3) {
      list = this.listCitiesByStates.filter((item) => {
        console.log(item.cities);
        // return (item.name.toLowerCase().indexOf(keyword.toLowerCase()) > -1 || item.code.toLowerCase().indexOf(keyword.toLowerCase()) > -1);
      });

      return list.map(res => {
        keyword = '';
        return res
      });
    } else {

      return list.map(res => {
        keyword = '';
        return res
      });
    }

  }
}

An example of my object I want to search:

[
  {
    "abbr": "AC",
    "name": "Acre",
    "cities": [
      "Acrelândia",
      "Assis Brasil",
      "Brasiléia",
      "Bujari",
      "Capixaba",
      "Cruzeiro do Sul",
      "Epitaciolândia",
      "Feijó",
      "Jordão",
      "Mâncio Lima",
      "Manoel Urbano",
      "Marechal Thaumaturgo",
      "Plácido de Castro",
      "Porto Acre",
      "Porto Walter",
      "Rio Branco",
      "Rodrigues Alves",
      "Santa Rosa do Purus",
      "Sena Madureira",
      "Senador Guiomard",
      "Tarauacá",
      "Xapuri"
    ]
  },
...
]

This is all I’ve done to try, it’s worth remembering once again that I have an autocomplete already working on my page and everything is perfectly fine. Where is this big problem?

[jobehi]

Well, I got a solution. I don’t really understand why is it this way. You have to redclare the Module in each page module you’re using. If you’re working in Example.html ; declaration should be in the Example.module.ts

import { NgModule } from ‘@angular/core’; import { IonicPageModule } from ‘ionic-angular’; import { ExamplePage} from ‘./example’; import { AutoCompleteModule } from ‘ionic2-auto-complete’; @NgModule({ declarations: [ ExamplePage, ], imports: [ AutoCompleteModule, IonicPageModule.forChild(AdditemPage),

], }) export class ExamplePageModule {}

[kadoshms]

Thanks @jobehi