Modal can't access data provider

Ionic Framework ionic-v3
1

Hi All,

I created a provider called “GlobalData” to share data across different pages, and it works fine everywhere except on my one modal page.

The exact error is: ModalCmp ionViewPreLoad error: No provider for GlobalData!

In app.component.ts, I import all pages and the provider

import { Details } from '../pages/details/details';    // this is the modal page
import { LotsOfOtherPages } from '../pages/xyz/xyz';
import { GlobalData } from '../providers/global-data';

I add my provider to the @Component decorator

@Component({
    templateUrl: 'app.html',
    providers: [GlobalData]                     // providing GlobalData here gives all pages access to the same copy
})

In app.module.ts, I import all pages but not the provider

import { Details } from '../pages/details/details';    // this is the modal page
import { LotsOfOtherPages } from '../pages/xyz/xyz';

…and I make sure to add the modal to declarations and entryComponents

@NgModule({
    declarations: [
        MyApp,
        ...,
        Details,
        ...
     ],
     imports: [
        IonicModule.forRoot(MyApp)
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp,
        ...,
        Details,
        ...
     ],
     ...
    })

What else needs to be done to give a modal access to a provider?

Thanks!
Ryan

2

Add your provider to app.module.ts and not to app.component.ts.

import { GlobalData } from '../providers/global-data';

...

@NgModule({
  ...
  providers: [GlobalData]
})
1 Like