Modal Provider

When creating a modal, looks like providers defined in bootstrap are not available.

My providers are working in other Components, but not in a modal.

Please share some code. It’s not possible to know what you are talking about without it.

Well, Im facing the same issue, I think:

I have this definiton for the app itself:

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

Now I try to open a modal:

presentFilter() {
    let modal = this.modalCtrl.create(XXXFilterPage, this.excludeTagIds);
    modal.present();

With this page:

export class XXXFilterPage {

    constructor(
        public navParams: NavParams,
        public viewCtrl: ViewController,
        public xxxProvider: XXXMockProvider
    ) {

However, I get:

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in ./XXXFilterPage class XXXFilterPage_Host - inline template:0:0
ORIGINAL EXCEPTION: No provider for XXXMockProvider!
ORIGINAL STACKTRACE:
Error: DI Exception
    at NoProviderError.BaseException [as constructor] (http://localhost:8100/build/js/app.bundle.js:2855:23)
    at NoProviderError.AbstractProviderError [as constructor] (http://localhost:8100/build/js/app.bundle.js:29511:16)
    at new NoProviderError (http://localhost:8100/build/js/app.bundle.js:29548:16)
    at ReflectiveInjector_._throwOrNull (http://localhost:8100/build/js/app.bundle.js:30545:19)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:8100/build/js/app.bundle.js:30573:25)
    at ReflectiveInjector_._getByKey (http://localhost:8100/build/js/app.bundle.js:30536:25)
    at ReflectiveInjector_.get (http://localhost:8100/build/js/app.bundle.js:30345:21)
    at ElementInjector.get (http://localhost:8100/build/js/app.bundle.js:32116:48)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:8100/build/js/app.bundle.js:30570:24)
    at ReflectiveInjector_._getByKey (http://localhost:8100/build/js/app.bundle.js:30536:25)
    at ReflectiveInjector_.get (http://localhost:8100/build/js/app.bundle.js:30345:21)
    at ElementInjector.get (http://localhost:8100/build/js/app.bundle.js:32116:48)
ERROR CONTEXT:
[object Object]

The same provider can be accessed in the page calling the modal without any problems.

However, I took this setup from the Conference app and there it seems to work well, so I have no clue what I’m doing wrong here

This is fixed by adding the providers to IonicBootstrap

ionicBootstrap(MyApp, [User, ChatService, ApiRequest, Elements, disableDeprecatedForms(), provideForms(),
        {
            provide: PLATFORM_PIPES,
            useValue: TranslatePipe,
            multi: true
        },
        {
            provide: TranslateLoader,
            useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
            deps: [Http]
        },
        TranslateService
    ], {}
);
1 Like

Thanks a lot that solved it!