There is no provider for ... an error using a service that uses another custom service

Question

So we are talking about angular2 and I know that this is still in alpha. I created a basic service that I am going to use in another service. The latter is then used in the component.

The basic service looks like

import {Injectable, Observable} from 'angular2/core'; import {Http} from 'angular2/http'; import {RequestOptionsArgs, Connection, ConnectionBackend} from 'angular2/http'; import {BaseRequestOptions, RequestOptions} from 'angular2/http'; import {RequestMethods} from 'angular2/http'; import {Response} from 'angular2/http'; import {Request} from 'angular2/http'; import {makeTypeError} from 'angular2/src/facade/exceptions'; @Injectable() export class MyOAuth extends Http { constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) { super(backend, defaultOptions); } /** * Performs any type of http request. First argument is required, and can either be a url or * a {@link Request} instance. If the first argument is a url, an optional {@link RequestOptions} * object can be provided as the 2nd argument. The options object will be merged with the values * of {@link BaseRequestOptions} before performing the request. */ request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> { var responseObservable: any; if (isString(url)) { responseObservable = httpRequest( this._backend, new Request(mergeOptions(this._defaultOptions, options, RequestMethods.Get, url))); } else if (url instanceof Request) { responseObservable = httpRequest(this._backend, url); } else { throw makeTypeError('First argument must be a url string or Request instance.'); } return responseObservable; } } 

Another service using the above looks like this (authenticate.js):

 import {Injectable, Inject} from 'angular2/angular2'; import {MyOAuth} from './MyOAuth'; @Injectable() export class AuthenticationService { constructor(@Inject(MyOAuth) http) { this.http = http; } authenticate(username, password, community) { console.log('authenticate'); } } 

Then in the class uses this service, I will name it like this:

 import {Page} from 'ionic/ionic'; import './login.scss'; import {AuthenticationService} from '../../services/authentication'; @Page({ templateUrl: 'app/login/login.html', providers: [AuthenticationService] //As of alpha 42 }) 

The error I get in the browser is

 EXCEPTION: No provider for MyOAuth! (LoginPage -> AuthenticationService -> MyOAuth) 

It doesn't seem to me that I need to import MyOAuth , as well ...

Answer 1

When you need to implement personalized services in other services, you need to provide services in a wider context (component, page, application)

You can do:

 import {Page} from 'ionic/ionic'; import './login.scss'; import {AuthenticationService} from '../../services/authentication'; @Page({ templateUrl: 'app/login/login.html', providers: [[AuthenticationService], [MyOAuth]] }) 

For me, if the services can be reused in several places, I always define them in the context of the application. Example:

 @Component({ templateUrl: 'build/app.html', providers: [[AuthenticationService], [MyOAuth]] }) class MyApp{ } 

Thus, these services will be installed only once. If you provide them, for example: Page1, Page2, they will be installed twice

Answer 2

You also need to provide your service:

 import {Page} from 'ionic/ionic'; import {provider} from '@angular/core'; import './login.scss'; import {AuthenticationService} from '../../services/authentication'; @Page({ templateUrl: 'app/login/login.html', providers: [AuthenticationService, provide(MyOAuth, {useClass: MyOAuth})] })