CODEWITHSUNDEEP
angularecmascript-6angular2-services
RemeJuan
RemeJuan

Reputation: 863

Using a service/provider within component on Angular 2 ES6

I am trying to get a service working within my component, but for the life of me after numerous iteration and exhausting the resources of google I have not yet been able to get it to work even though it aligns up with basically every example I have found. My last attempt was to use ionics generator to generate the provider and that still does not work.

Service:

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

@Injectable()
export class EventsService {
  static get parameters() {
    return [
      [Http]
    ]
  }

  constructor(http) {
    this.http = http;
    this.data = null;
  }

  load() {
    if (this.data) {
      return Promise.resolve(this.data);
    }

    return new Promise(resolve => {
      this.http.get( 'URL_OMMITED')
        .map(res => res.json())
        .subscribe(data => {
          this.data = data;
          resolve(this.data);
        });
    });
  }
}

Component:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ScientificFactsPage } from '../scientific-facts-page/scientific-facts-page';
import { Header } from '../../components/header/header';
import { List } from '../../components/list/list';
import { EventsService } from '../../providers/events-service/events-service';

@Component({
  templateUrl: 'build/pages/home-page/home-page.html',
  directives: [Header, List],
  providers: [EventsService],
})
export class HomePage {
  static get parameters() {
    return [
      [NavController]
    ];
  }

  constructor(_navController) {
    this._navController = _navController;
    this._events = EventsService;

    this.provinces = this._events.load();
  }

  logProvince(province) {
    alert(`You selected ${province.name}`);
  }

}

I cannot figure out what I am missing, the console throws a massive stack trace error that is about as helpful as 'Something happened', all it really gives of use to me that my function is apparently not a function.

Error excerpt:

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in :0:0
ORIGINAL EXCEPTION: TypeError: this._events.load is not a function
ORIGINAL STACKTRACE:
TypeError: this._events.load is not a function
    at new HomePage (http://localhost:8100/build/js/app.bundle.js:233:35)
    at DebugAppView._View_HomePage_Host0.createInternal (HomePage_Host.template.js:25:24)
    at DebugAppView.AppView.create (http://localhost:8100/build/js/app.bundle.js:26040:21)
    at DebugAppView.create (http://localhost:8100/build/js/app.bundle.js:26233:44)
    at ComponentFactory.create (http://localhost:8100/build/js/app.bundle.js:25354:36)
    at ViewContainerRef_.createComponent (http://localhost:8100/build/js/app.bundle.js:26430:45)
    at http://localhost:8100/build/js/app.bundle.js:25571:29
    at ZoneDelegate.invoke (http://localhost:8100/build/js/zone.js:323:29)
    at Object.onInvoke (http://localhost:8100/build/js/app.bundle.js:30868:41)
    at ZoneDelegate.invoke (http://localhost:8100/build/js/zone.js:322:35)
ERROR CONTEXT:
[object Object]

Upvotes: 1

Views: 323

Answers (2)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657406

You need to inject EventService like you do with NavController. You just assigned the type variable. You would need at least to use = new EventService() instead of just = EventService, but injecting is better and probably what you want anyway because you already added it to providers: [...].

@Component({
  templateUrl: 'build/pages/home-page/home-page.html',
  directives: [Header, List],
  providers: [EventsService],
})
export class HomePage {
  static get parameters() {
    return [
      // updated according to the find of @RemeJuan
      [NavController], [EventsService]
    ];
  }

  constructor(_navController, _events) {
    this._navController = _navController;
    this._events = _events;

    this.provinces = this._events.load();
  }

  logProvince(province) {
    alert(`You selected ${province.name}`);
  }

}

Upvotes: 1

RemeJuan
RemeJuan

Reputation: 863

It took some doing, but with a bit of help from https://github.com/driftyco/ionic-conference-app, I managed to work out where the problems were.

Starters I needed to bootstrap the provider into app.js

ionicBootstrap(MyApp, [ProvinceData]);

@günter-zöchbauer was on the right track, just some minor issues, each paramater is its own array inside the returned array. Thanks for all the help.

  static get parameters() {
    return [
      [NavController],
      [ProvinceData]
    ];
  }

After that it was simply putting in the required promise call backs.

Upvotes: 1

Related Questions