Ionic components can't access providers

Ionic Framework ionic-v3
1

Hello guys,

I created several data providers and imported into app.module.ts properly.

import { DataProvider } from '../providers/data/data';

 providers: [
    { provide: ErrorHandler, useClass: IonicErrorHandler },
    InAppBrowser,
    SplashScreen,
    HttpClientModule,
    DataProvider,

  ]

The providers are working fine on normal pages.

However I can’t load data from providers on components. What am I missing here? I imported provider to components.module.ts and components.module.ts is properly imported on app.module.ts. I don’t see any set up that is particularly preventing components from accessing providers.

Thanks,

2

do you use lazy loading? can you share more of the code structure that you have

1 Like
3

Are they imported to the components themselves?

1 Like
4

You have to import the provide required into the component ts file and not the overall components.module.ts.

1 Like
5

Yes, imported the data provider to components.module.ts as well as components ts files. I imported components to app.module.ts’s entryComponent too.

components.module.ts:

import { DataProvider } from '../providers/data/data';
import 'rxjs/add/operator/debounceTime';

provider: [ DataProvider ]

app.module.ts


import { ComponentsModule } from '../components/components.module';
import { component01 } from './../components/component01/component01'  

 imports: [     BrowserModule,
    HttpModule,
    ComponentsModule,
    HttpClientModule,
    IonicModule],
entryComponent: [  component01 ],
 providers: [ DataProvider ]

and in component1.ts file:

import { DataProvider } from '../../providers/data/data';
import 'rxjs/add/operator/debounceTime';

Other pages can access data object array in DataProvider without any problem… but component01 still can’t access dataprovider… I wonder what’s missing.

Thanks,

6

I can only say that my components are working OK- but then I do not put them into the components.module.ts file. Perhaps that is causing a conflict?

1 Like
7

Thanks for your response…
The component01 is properly imported into components.module.ts
I don’t know what’s causing this problem… any other thought?

8

Did you try taking

import { DataProvider } from ‘…/providers/data/data’;

out of components.module.ts ?

1 Like
9

Yes, it’s already imported in my components.module.ts. but nothing’s working…

10

I don’t think I was very clear …

Try talking the import out of components.module.ts.

This is my components.module.ts file.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from 'ionic-angular'
import { FrtextComponent } from './frtext/frtext';
import { TopbarComponent } from './topbar/topbar';
import { LvcardComponent } from './lvcard/lvcard';
import { ReplayComponent } from './replay/replay';
import { PassedComponent } from './passed/passed';
import { LvtoastComponent } from './lvtoast/lvtoast';
import { TextcounterComponent } from './textcounter/textcounter';
import { CombineComponent } from './combine/combine';
import { CombinegbComponent } from './combinegb/combinegb';
import { LayoutComponent } from './layout/layout';
import { LvfcardComponent } from './lvfcard/lvfcard';
import { LearnsentenceComponent } from './learnsentence/learnsentence';



@NgModule({
	imports: [
         CommonModule, IonicModule
    ],
	declarations: [FrtextComponent,
    TopbarComponent,
    LvcardComponent,
    ReplayComponent,
    PassedComponent,
    LvtoastComponent,
    TextcounterComponent,
    CombineComponent,
    CombinegbComponent,
    LayoutComponent,
    LvfcardComponent,
    LearnsentenceComponent],
	exports: [FrtextComponent,
    TopbarComponent,
    LvcardComponent,
    ReplayComponent,
    PassedComponent,
    LvtoastComponent,
    TextcounterComponent,
    CombineComponent,
    CombinegbComponent,
    LayoutComponent,
    LvfcardComponent,
    LearnsentenceComponent]


})
export class ComponentsModule {}
1 Like
11

Thanks for extended help. Yes, now I removed dataprovider import from components.module.ts

The result is the same.*ngFor="let item of items" directive isn’t working on component01…
The same code works well on normal pages.

12

Don’t register your provider with two different modules. You have two choices: either (1) register the provider with app.component.ts, or (2) register the provider with each smaller module you want to use it in.

If you do (1), you create a single, global instance of a provider that can be injected anywhere. if you do (2), you create a unique instance of the provider that can only be injected within the scope of the module. So with (2), you can create multiple copies of the same provider. Most of the time, you’ll want the information in the provider available anywhere, so making a single copy of the provider is better.

if you do (2), create a ModuleWithProviders instead of an NgModule, to register your providers and components.

2 Likes
13

Thanks! I will try this now.

14

I had a strange example today - I tried to redesign one of my pages to use ion-grid but the custom component did not work (reported a data bug) - put back into a simple div and it worked fine.

1 Like
15

Still no luck… I don’t know what’s wrong with my set up. I didn’t do anything complicated yet. Maybe I will turn components into just normal pages.

@JAR19 maybe ionic module was not imported to your components.module.ts?

16

Before giving up try one more thing.

  1. In a html page make a call to a variable in the data provider i.e. {{dataprovider.varaible}} - just to make sure that works as expected.
  2. Generate a new customer component.
  3. Add import to your data provider
  4. in the component html add a call as outlined in 1 above.

If the custom component shows the variable then at least you know it getting the provider.

1 Like
17

If you post a link to a repo I’ll look at it. I can’t completely follow your posted code, sorry.

1 Like
18

Thanks for your help so far. I’m working on Ionic conference app. You can start a conference app demo and create component and then try to load any data array to the component using *ngFor. It could be that there’s something wrong with this conference app, not ionic / angular 5… I’m really confused because everything seems alright but it’s not working.

@JAR19 yes, other pages can load from data array easily. Nothing seems to be wrong with data array… I tried to add import to data provider … but no luck. Thanks

19

Btw, I’m loading all components within a parent HTML page using a selector.

in home.html

<component01></component01>

When a user clicks on a button, it will open up component01’s content within home.html.
and there’s *ngFor directive in component01…

20

@jamesharvey - sometimes the simply things are overlooked - when I am working on components I have to restart ionic serve to see any changes made to the components (apart from the css which works immediately).

1 Like