Import error autocomplete ionic

[renanmoraes]

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?

[kadoshms]

Wow this is very odd. If you remove this component from that page, the autocomplete in the home page works?

[renanmoraes]

I do not know, I'm going to take this test.

[renanmoraes]

Yes the autocomplete of the home page work regardless of my model, all following the normal flow, if I put it spits me the error. At least you know what might have happened? Seeing my code saw something wrong?

[kadoshms]

Well this is pretty foggy. Can you please share your folder structure, or maybe some more relevant code? Maybe the component itself? I can't see anything too suspicious in the code you provided.

[renanmoraes]

My folder is as follows, the file that is giving problem is the city-indication and it is located in

my-app/src/pages/city-indication

Already the file that is right is that of home, and it is located in

my-app/src/pages/home

All my providers are in the same folder, both what I consume with the home (what works) and the city-indication (which does not work) and it's here

my-app/src/providers

The main folder is where I made the imports and everything else is here

my-app/src/app/app.module.ts

And there's still my json that is located in assets whose path is

my-app/src/assets/json/

For code I sent you exactly everything I did, if I knew I would create a plunker but I do not know how to work with it, it never worked the times I tried, if you have how you do a test there, and try to add 2 autocompletes totally independent one on the other to test and see working thank you.

[kadoshms]

@renanmoraes This is a real shot in the dark - Iv'e just setup these files in my environment and everything worked perfectly normal. Maybe you should consider letting me take a look in your repo?

[TizioFittizio]

+1 This is happening to me too, same errors as above, but instead i've not even one working ion-autocomplete I just followed the instructions in the read.me

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. ("n-content padding [ngStyle]="{'margin-top': showFilters ? '140px' : '0'}">

    <ion-auto-complete  [ERROR ->][dataProvider]="autocompleteItalianCities"></ion-auto-complete>
    <ion-refresher (ionRefresh)="doRe"): ng:///RentsPageModule/RentsPage.html@65:24
'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. ("
<ion-content padding [ngStyle]="{'margin-top': showFilters ? '140px' : '0'}">

    [ERROR ->]<ion-auto-complete  [dataProvider]="autocompleteItalianCities"></ion-auto-complete>
    <ion-refreshe"): ng:///RentsPageModule/RentsPage.html@65:4
    at syntaxError (compiler.es5.js:1694)
    at TemplateParser.parse (compiler.es5.js:12932)
    at JitCompiler._compileTemplate (compiler.es5.js:27126)
    at compiler.es5.js:27045
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.es5.js:27045)
    at compiler.es5.js:26932
    at Object.then (compiler.es5.js:1683)
    at JitCompiler._compileModuleAndComponents (compiler.es5.js:26931)
    at JitCompiler.compileModuleAsync (compiler.es5.js:26860)

@ionic/cli-utils  : 1.12.0
    ionic (Ionic CLI) : 3.12.0

global packages:

    cordova (Cordova CLI) : 7.0.1

local packages:

    @ionic/app-scripts : 3.0.0
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.7.1

System:

    Node : v6.11.3
    npm  : 3.10.10
    OS   : Windows 10

Misc:

    backend : pro

[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

[ibmbootcamp]

@jobehi Thanks. This works for me.