Uncaught (in promise): Error: No provider for QuotesService

Ionic Framework ionic-v3
1

Runtime Error
Uncaught (in promise): Error: No provider for QuotesService! Error: No provider for QuotesService! at injectionError (http://localhost:8100/build/vendor.js:1590:86) at noProviderError (http://localhost:8100/build/vendor.js:1628:12) at ReflectiveInjector_.throwOrNull (http://localhost:8100/build/vendor.js:3129:19) at ReflectiveInjector.getByKeyDefault (http://localhost:8100/build/vendor.js:3168:25) at ReflectiveInjector.getByKey (http://localhost:8100/build/vendor.js:3100:25) at ReflectiveInjector.get (http://localhost:8100/build/vendor.js:2969:21) at AppModuleInjector.NgModuleInjector.get (http://localhost:8100/build/vendor.js:3937:52) at resolveDep (http://localhost:8100/build/vendor.js:11398:45) at createClass (http://localhost:8100/build/vendor.js:11262:32) at createDirectiveInstance (http://localhost:8100/build/vendor.js:11082:37)

hello everyone…i am newbie in ionic, and i got this error…i had already find all of forum about this prob, but i still cant find what should i do… kindly help!!!

here is my code

this is data/quote.ts

import { Quote } from '../data/quote.interface'; 

export class QuotesService{
    private favoriteQuotes: Quote[] = [];

    addQuoteToFavorites(quote:Quote){
        this.favoriteQuotes.push(quote);
    }

    removeQuoteFromFavorites(quote:Quote){

    }
    getFavoriteQuotes(){}
    isFavorite(quote:Quote){}
    getAllFavoriteQuotes(){}
}

this is my pages/quotes/quotes.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
import { Quote } from '../../data/quote.interface';
import { QuotesService } from '../../services/quotes';

/**
 * Generated class for the QuotesPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-quotes',
  templateUrl: 'quotes.html',
})
export class QuotesPage {
  k2quote: Quote[];
  constructor(public navCtrl: NavController, public navParams: NavParams, private alertCtrl: AlertController, private quotesService: QuotesService) {
  }
  
  ionViewDidLoad(quote) {
    console.log('ionViewDidLoad QuotesPage');
  }
  ngOnInit(){
    this.k2quote = this.navParams.get('kquote');
  }
  klikfav(){
    let alert =this.alertCtrl.create({
      title:"jadi fav?",
      message: 'jadi fav gak ni?',
      buttons:[
        {
          text:"OK",
          handler:()=>{
            console.log('oke jadi fav deh');
          }
        },
        {
          text:'Cancel',
          role: 'cancel',
          handler:()=>{
            console.log('gajadi yahhh');
          }
        }
      ]
    });
    alert.present();
  }

  onAddQuote(quote: Quote){
    this.quotesService.addQuoteToFavorites(quote);
  }
}

this is my pages/quotes/quotes.html

<!--
  Generated template for the QuotesPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>Quotes</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
<ion-card *ngFor="let hquote of k2quote">
  <ion-card-header>{{hquote.id}}</ion-card-header>
  <ion-card-content>
      "{{hquote.text}}"
      <br><br>
      <p text-right>
        -{{hquote.person}}
      </p>
  </ion-card-content>
  <ion-grid>
    <ion-row text-right>
      <ion-col>
        <button ion-button clear small color="blue" icon-start (click)="klikfav(hquote)">
            <ion-icon name="star"></ion-icon>
            Favorite
        </button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-card>
</ion-content>
2

Hi

Is the provided provided for in your app.module.ts?

Should be somewhere in there

Regards

Tom

3

here is my app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { LibraryPage } from '../pages/library/library';
import { FavoritePage } from '../pages/favorite/favorite';
import { QuotesPage } from '../pages/quotes/quotes';




@NgModule({
  declarations: [
    MyApp,
    HomePage,
    TabsPage,
    LibraryPage,
    FavoritePage,
    QuotesPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    TabsPage,
    LibraryPage,
    FavoritePage,
    QuotesPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

please kindly help @Tommertom

4

Hi

Add QuotesService to the array of providers at the bottom.

Rgdz

Tom

5

wah thanks…it’s works @Tommertom