Using Ionic 3, I created a class for global variables but encountered an error
Uncaught (in promise): Error: No provider for Globals! Error: No provider for Globals! at injectionError
(http://localhost:8100/build/vendor.js:1590:86) at noProviderError
The news.ts file contains the following code:
import {Globals} from "../../app/globals";
constructor(private globals: Globals, public navCtrl: NavController, public navParams: NavParams, private http: Http) {
this.getData();
}
getData()
{
this.http.get(this.globals.baseUrl + 'articles').map(res => res.json()).subscribe(data => {
this.results = data;
console.log(data)
});
}
I attempted to import Globals in the app.module within providers but received another error:
Encountered undefined provider! Usually this means you have circular dependencies (might be caused by using 'barrel' index.ts files.
The app.module.ts file imports Globals but does not declare it in providers:
import {NgModule, ErrorHandler} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {IonicApp, IonicModule, IonicErrorHandler} from 'ionic-angular';
import {MyApp} from './app.component';
import {Globals} from 'globals';
import {TabsPage} from '../pages/tabs/tabs';
import {NewsPage} from '../pages/news/news';
import {StatusBar} from '@ionic-native/status-bar';
import {SplashScreen} from '@ionic-native/splash-screen';
import { HttpModule } from '@angular/http';
import {enableProdMode} from '@angular/core';
enableProdMode();
@NgModule({
declarations: [
MyApp,
TabsPage,
NewsPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
HttpModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
TabsPage,
NewsPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
]
})
export class AppModule {
}
This is the content of the globals.ts file :
import { Injectable } from '@angular/core';
@Injectable()
export class Globals {
baseUrl: string = 'http://127.0.0.1/rest/web/app_dev.php/api/';
uploadRootDir: string = 'http://localhost/rest/web/';
}