Import loadingCtrl in http page


import { Injectable} from ‘@angular/core’;
import { Http, XHRBackend, RequestOptions, Request, RequestOptionsArgs, Response, Headers, ConnectionBackend} from ‘@angular/http’;
import ‘rxjs/add/operator/map’;
import ‘rxjs/add/operator/catch’;
import { Observable } from ‘rxjs/Observable’;
import ‘rxjs/add/operator/do’;
import ‘rxjs/add/operator/finally’;
import { IonicPage, NavController, NavParams,ViewController,LoadingController } from ‘ionic-angular’;

export class HttpService extends Http {

public loading = loadingCtrl.create({
content: “Loading…”

constructor (backend: XHRBackend, options: RequestOptions,public loadingCtrl: LoadingController, public nav:NavController) {

options.headers.set('Authorization', 'Basic ZGVtb19vYXV0aF9jbGllbnQ6ZGVtb19vYXV0aF9zZWNyZXQ=');

   if(!window.localStorage.getItem('access_token')|| window.localStorage.getItem('access_token') == "undefined" || window.localStorage.getItem('access_token') == "" ){
       options.headers.set('Authorization', 'Basic ZGVtb19vYXV0aF9jbGllbnQ6ZGVtb19vYXV0aF9zZWNyZXQ=');


options.headers.set(‘Authorization’, 'Bearer '+window.localStorage.getItem(‘access_token’));
super(backend, options);


request(url: string | Request, options?: RequestOptionsArgs): Observable {

  return this.intercept(super.request(url, options));


intercept(observable: Observable): Observable {
console.log(“In the intercept routine…”);

return observable
.catch((err, source) => {
console.log("Caught error: " + err);
.do((res: Response) => {
console.log("Response: " + res);
}, (err: any) => {
console.log("Caught error: " + err);
.finally(() => {
console.log(“Finally… delaying, though.”)



public showLoader() {




This is my service page. how can i add ladingctrl in this page.?


Reformate your code please


How can i reformate . please help with this


one workaround for this is to use events… since its not a good practice to add NaVController in injectable


I really think services interacting with the view layer is a massive antipattern, but if you insist on doing it, at least make sure you don’t attempt to reuse loading indicators like it looks like you are planning to do. Your app will crash on the second HTTP request.


Please edit your post and use the </> button above the post input field to format your code or error message or wrap it in ``` (“code fences”) manually. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.