How to include service provider in modal page in ionic v4

Ionic Framework
1

I have created service provider .ts file and included in all pages. working fine in all pages. i have created modal page and exclude from root menu. i am calling that modal in another page. but in .ts page of modal, i cant include provider .ts file.

modalassign.page.ts

import { Component} from '@angular/core';
import { NavController, NavParams, ToastController, Platform, ModalController} from '@ionic/angular';
import { Http, Headers, RequestOptions } from '@angular/http';
import { Storage } from '@ionic/storage';
import { DataService } from '../services/data/data.service';

@Component({
  selector: 'app-modalassign',
  templateUrl: './modalassign.page.html',
  styleUrls: ['./modalassign.page.scss'],
  providers: [ DataService ]
})
export class ModalassignPage {
constructor(
    public dataProvider: DataService,
  ) {
console.log(this.dataProvider.accessControl());
}
}

data.ts

import { Http, Headers, RequestOptions } from '@angular/http';
import { App, NavController, Platform } from '@ionic/angular';
import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';
import { Storage } from '@ionic/storage';
import { RouterModule, Routes } from '@angular/router';


@Injectable({
  providedIn: 'root',
})
export class DataService {

private navCtrl: NavController;


  constructor(public http: Http,public storage: Storage, public app:App, public platform: Platform) {
    
  }


  accessControl(){
      console.log("hurray!");
  }

22%20pm

2

Did u put the provider in app.module.ts as a module dependency?

3

yes i have added that too

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, RouteReuseStrategy, Routes } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { HttpModule } from '@angular/http';
import { IonicStorageModule } from '@ionic/storage';
import { DataService } from './services/data/data.service';
import { ModalassignPage } from './modalassign/modalassign.page';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { ComponentsModule } from './components/components.module';

@NgModule({
  declarations: [AppComponent,ModalassignPage],
  entryComponents: [
    ModalassignPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    ComponentsModule,
    IonicStorageModule.forRoot(),
    HttpModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    DataService
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}
4

one hint is, i m passing parameters to modal. and getting through navparams.

5

Sorry my mistake. i have removed “App” from

import { NavController, Platform } from '@ionic/angular';

from data.ts

now its working :slight_smile: