ng2-completer - Error Produced in Production build

Question

I am using ng2-completer to create a search box where user can search for the github usernames. I have used CompleterService, CompleterData for getting data from the API.

Component.ts

protected searchStr: string;
protected captain: string;
protected dataService: CompleterData;

constructor(private completerService: CompleterService) {

this.dataService = completerService.remote(null, 'login', 'login');
this.dataService.urlFormater((term: any) => {
  return `https://api.github.com/search/users?q=${term}&per_page=5`;
});
this.dataService.dataField('items');
}

html file:

 <ng2-completer [(ngModel)]="searchStr" [datasource]="dataService" [minSearchLength]="3" inputClass="form-control"></ng2-completer>

Error :

ERROR in src/app/search-box/search-box.component.ts(18,22):
error TS2339: 
Property 'urlFormater' does not exist on type 'CompleterData'.
src/app/search-box/search-box.component.ts(21,22):
 error TS2339: Property 
'dataField' does not exist on type 'CompleterData'.

But the development version is working fine but the still the error is produced in cmd.

Answer 1

Did you miss the dependency injection for CompleterData? Instead of declaring it outside the constructor as:

protected dataService: CompleterData;

I suggest you inject it into the constructor as :

constructor
(
    private completerService : CompleterService,
    private dataService      : CompleterData
) 
{}

Answer 2

Changing completerData to RemoteData works.

import { CompleterService, CompleterData, RemoteData } from 'ng2-completer';

 searchStr: string;
 dataService: RemoteData;

constructor(private completerService: CompleterService) {

   this.dataService = completerService.remote(null, 'login', 'login');
   this.dataService.urlFormater((term: any) => {
  return `https://api.github.com/search/users?q=${term}&per_page=5`;
});

this.dataService.dataField('items');
}

This Works fine.