EXCEPTION: No provider for UserData! (LoginPage -> UserData)

Ionic Framework ionic-v3
21

Ionic does that for you. The @App decorator adds a bunch of directives and providers automatically, and HTTP_PROVIDERS is among them.

1 Like
22

Oh, my bad, I was in vanilla Angular 2 land again :slight_smile:

In regular Angular 2 you do have to add HTTP_PROVIDERS, but I guess Ionic just does it for you. Thanks for adding that :thumbsup:, I was not aware.

23

Unfortunately it seems like it is indeed by design and I’m not holding my breath hoping for it to change.

There’s an ongoing discussion about it here: https://github.com/angular/angular/issues/5622

A sort of workaround to decouple service from inner dependencies could be to export a constant array (export constant SOME_SERVICE = [SomeService, OtherServiceUsedBySomeService …] and add that to component’s providers array instead.

I guess that is the same pattern already used in Angular2 when considering HTTP_DIRECTIVES etc

2 Likes
Hello, I'm struggling with injecting a service into a service
Dependency Injection, nested providers
24

Same problem here, I lost almost 1 day looking for a solution and finally found your answer, quite disapointing.
It seems the @App will be quite messy with all the providers that I’ll use on sub Components.
At least I can stop looking now, thanks for the feedback.

25

I had the same problem. I have an app.ts and a login.ts and an user-data.ts. All started to work when I put UserData as a provider in the app.ts.

@Component({
  templateUrl: 'build/app.html',
  directives: [ROUTER_DIRECTIVES], 
  providers: [
    { 
      provide: TranslateLoader, 
      useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
      deps: [Http]
    },
    TranslateService,
    ROUTER_PROVIDERS,
    UserData
  ]
})

Hope it helps

1 Like