No provider for ServiceProvider! - Error on Ionic

Ionic Framework ionic-v3
1

Full error

Runtime Error
Uncaught (in promise): Error: No provider for ServiceProvider! Error at g ('http://localhost:8100/build/polyfills.js:3:7133) at injectionError (http://localhost:8100/build/main.js:1511:86) at noProviderError (http://localhost:8100/build/main.js:1549:12) at ReflectiveInjector_.throwOrNull ('http://localhost:8100/build/main.js:3051:19) at ReflectiveInjector.getByKeyDefault ('http://localhost:8100/build/main.js:3090:25) at ReflectiveInjector.getByKey ('http://localhost:8100/build/main.js:3022:25) at ReflectiveInjector.get ('http://localhost:8100/build/main.js:2891:21) at AppModuleInjector.NgModuleInjector.get ('http://localhost:8100/build/main.js:3856:52) at resolveDep (http://localhost:8100/build/main.js:11260:45) at createClass (http://localhost:8100/build/main.js:11120:91) at createDirectiveInstance (‘http://localhost:8100/build/main.js:10954:37’) at createViewNodes (‘http://localhost:8100/build/main.js:12303:49’) at createRootView (‘http://localhost:8100/build/main.js:12208:5’) at callWithDebugContext (‘http://localhost:8100/build/main.js:13339:42’) at Object.debugCreateRootView [as createRootView] (‘http://localhost:8100/build/main.js:12800:12’)

I created a provider, where i added the code below on provider/service-provider.ts

import { Injectable } from ‘@angular/core’;
import { Http } from ‘@angular/http’;
import ‘rxjs/add/operator/map’;

import { Observable } from ‘rxjs/Observable’
/*
Generated class for the ServiceProvider provider.

See Angular
for more info on providers and Angular 2 DI.
*/
@Injectable()
export class ServiceProvider {

api:string=‘http://localhost:80/api/’

constructor(public http: Http) {
console.log(‘Hello ServiceProvider Provider’);}
getData(){
this.http.get(this.api+‘apiRecupera.php’).map(res => res.json())
}
}

and i call this Provider on home.ts

import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;

import {ServiceProvider} from ‘…/…/providers/service-provider’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {

users:any;

constructor(public navCtrl: NavController, public service:ServiceProvider) {

}

}

anyone can help me?

2

Try this 2 solutions:

  1. verify the path on home.ts import {ServiceProvider} from ‘…/…/providers/service-provider’;

or
2) You add on app.module.ts the HttpModule and FormsModule like this:

import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

and on imports in app.module.ts

 imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    ],
3

I tried two solutions, the path is correct.
I added both imports to app.module.ts, but it still did not work.

4

you added your provide import on app.module.ts ?

import {ServiceProvider} from '../../providers/service-provider';
.
.
.
     providers: [
        ServiceProvider,
        {provide: ErrorHandler, useClass: IonicErrorHandler}
    ]
1 Like
5

Thanks man! I forgot to add in providers!
Thank you very much!

2 Likes
6

Try this,

import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;

import {ServiceProvider} from ‘…/…/providers/service-provider’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’,
providers: [ServiceProvider, Network]
})
export class HomePage {

users:any[];

constructor(public navCtrl: NavController, public service:ServiceProvider) {

}

}

7

Generally, the advice in the previous post is bad. Only follow it if you want a separate instance of ServiceProvider in each page. If you want an app-wide singleton, which you do in 98% of cases, instead follow @mmonte’s earlier advice and put it in the app module.

8

Very important before {provide: ErrorHandler, useClass: IonicErrorHandler}