In just a few minutes, I quickly put together a basic creation that can be easily replicated.
First, I utilized the following command to create an app:
ionic start blank --v2
Next, I generated a provider:
ionic g provider FacebookFriends
Then, I inserted the following code into my provider:
import {Injectable, Inject} from 'angular2/core';
import {Http} from 'angular2/http';
/*
The above code is a sample of a FacebookFriends provider.
For more details on dependency injection and providers in Angular 2, visit https://angular.io/docs/ts/latest/guide/dependency-injection.html
*/
@Injectable()
export class FacebookFriends {
constructor(@Inject(Http) http) {
this.http = http;
this.data = null;
}
load() {
if (this.data) {
// data already loaded
return Promise.resolve(this.data);
}
// data not yet loaded
return new Promise(resolve => {
this.http.get('path/to/data.json')
.map(res => res.json())
.subscribe(data => {
this.data = data;
resolve(this.data);
});
});
}
}
Following that, I attempted to inject this into app.js:
import {App, Platform} from 'ionic-angular';
import {TabsPage} from './pages/tabs/tabs';
import {FacebookFriends} from './providers/facebook-friends/facebook-friends';
@App({
template: '<ion-nav [root]="rootPage"></ion-nav>',
config: {},
providers: [FacebookFriends]
})
export class MyApp {
static get parameters() {
return [[Platform]];
}
constructor(platform, private _facebookFriends) {
this.rootPage = TabsPage;
platform.ready().then(() => {
});
}
}
These are the steps I took. However, when running 'ionic serve', I encountered numerous errors. The errors indicated unknown tokens at the @Inject and @Injectable words, as well as an unexpected token at the private _facebookFriends line.
Additionally, when trying to add types to the constructor like platform:Platform and _facebookFriends:FacebookFriends, I faced issues stating that the ':' were unknown tokens.
Essentially, I am trying to invoke a service from my app.js, but I am encountering difficulties.