Encountered undefined provider!

Ionic Framework ionic-v3
1

I have a provider which uses another provider, and I am getting this error when viewing the app through ionic serve:

Encountered undefined provider! Usually this means you have a circular dependencies (might be caused by using ‘barrel’ index.ts files

I have read that it can be fixed using forwardref, but the examples seem very different to what I am trying to do.
Does forwardref need to go in app.module.ts somewhere?

Thanks.

2 Likes
2

My personal opinion is: most of the time, if you need to use forwardRef, you designed something incorrectly. Circular dependencies can cause bugs that are extremely hard to track, even with a time traveler. How would you diagram your injections? If it’s A -> B -> A, then you might want to rethink.

3

Hi thanks for the reply, no it’s just A->B. The page imports provider A, and provider A imports provider B. Am I right in thinking this is a normal implementation?

4

Yeah that’s perfectly fine.

How/where are you importing the providers as far as modules go?

5

I have declared/imported them at the top of app.module.ts, then added them into providers in ngModule. Then in the provider files and page files, imported them at the top and added into the constructors.

6

Are you following some tutorial that suggested this? It sounds wrong.

7

Ok, that is how I have seen it in every example online.
For example https://stackoverflow.com/questions/40918590/ionic-2-provider
I just found that from a quick search and it is exactly how all other examples I have seen have done it.

8

Not if you put it in app.module.ts also. You do one or the other. I think you’d be better off reading the official Ionic Github sample projects.

9

So those stack overflow answers are incorrect?
It is strange that it has been working for me with one provider, but started giving me the error when I added another.

10

It’s a common pattern IMO. The framework changes a lot, so a lot of half-answers time out after a few months. In this case, though, the issue is Angular, not Ionic. If you put a provider in a local module and also into app.module.ts, you break what Angular is expecting, and it defines the provider as both a global and a local provider, which will lead to bad behavior.

Crawl @mhartington’s repo if you want code samples that work. For example:

11

That example is exactly as mine and the SO examples. The SpotifyProvider is present in all the same places.

app.module.ts:

import { SpotifyProvider } from '../providers/spotify/spotify';
...
@NgModule({
...
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    SpotifyProvider
  ]
})

home.ts:

import { SpotifyProvider } from '../../providers/spotify/spotify'
...
export class HomePage {
...
  constructor(
    public navCtrl: NavController,
    public fb: FormBuilder,
    public spotify: SpotifyProvider
  )
...
12

Then why did you say you put the provider into the page’s module also? That’s what I said was wrong.

13

I think they only said that they put the provider in the page’s constructor.

14

But if everything is done correctly, why is there an issue?

15

No I haven’t changed the page module files, the only difference to the above example is that I am trying to access one of my providers in another of my providers.

16

That is pretty much the reason for opening this thread, to answer that question.

17

I won’t respond again unless you post code. I’m done trying to decipher vague English.

18

Sure, I’ll post code. Sorry, I was trying to be as clear as possible, to be fair, you were the one that misinterpreted what I had said, SigmundFroyd understood me well enough.

19

How did you solve this problem? I have this error message:

Uncaught ReferenceError: SesionProvider is not defined

From SesionProvider i get information from other providers.

20

I found the solution.

I change this:

private sesionProvider: SesionProvider

To this:

@Inject(forwardRef(() => SesionProvider)) private sesionProvider

And works! :tada: I hope this solution has been helpful. :kissing_heart: