How to extend a service in angular 7

Question

I am migrating my app from Angular 3 to Angular 7,

Ionic 3 to Ionic 4

There are two services BaseHttpService which is mainly responsible for Http calls and AppService which extends the BaseHttpService to make calls.

In the migration Docs, it is mentioned to use { providedIn: "root" } in services.

But the base and parent class in services is nowhere mentioned.I tried many approaches but didnt went through.

I have a parent service which has some dependencies like

export abstract class BaseHttpService implements OnInit {

   private baseUrl: string = Constants.BASEURL;
   protected method: string;
   protected serviceUrl: string;
   protected headers: Headers;
   constructor(private http:) {
    this.headers = new Headers();
    this.headers.append('Content-Type', 'application/json')
    this.headers.append('Accept', 'application/json');
   }
}

and I want to extend the service

@Injectable({ providedIn: "root" })
export class AppService extends BaseHttpService{
  constructor(private _http: Http, ) {
    super(_http);
}

But it is throwing error while running on browser

Please check this example link: may be this is helpfull for you. [how to extend service with dependencies in angular 2](https://stackoverflow.com/a/50308933/3012323) — Pankaj Chauhan, Jul 14 '19 at 09:08
@GhoulAhmed it's the repeated parameter property, *not* the type, that's part of the problem; the *access modifier* is the but that needs removing. — jonrsharpe, Jul 14 '19 at 09:12
And has that materially changed since Angular 2? Are you saying there's a problem with that solution now and, if so, what? — jonrsharpe, Jul 14 '19 at 12:37
The problem was with the debugging limitation of Angular Application on Firefox . The problem with the code was Http Module wasnt injected in the main module, which i was not able to diagnose on firefox console. — manish kumar, Jul 14 '19 at 17:17

score -3 · Answer 1 · answered Jul 14 '19 at 09:03

-3

base Http Service:

export abstract class BaseHttpService implements OnInit {

   private baseUrl: string = Constants.BASEURL;
   protected method: string;
   protected serviceUrl: string;
   protected headers: Headers;
   constructor(private http: Http) {
    this.headers = new Headers();
    this.headers.append('Content-Type', 'application/json')
    this.headers.append('Accept', 'application/json');
   }
}

App Service:

@Injectable({ providedIn: "root" })
export class AppService extends BaseHttpService{
  constructor(private _http: Http, private baseHttpService: BaseHttpService ) {
    super(_http, baseHttpService);
}

answered Jul 14 '19 at 09:03

Jake11

801
2
11
24

you send two params constructor(private _http: Http, private baseHttpService: BaseHttpService ) but define one param in parent constructor – Ghoul Ahmed Jul 14 '19 at 09:06
yes, because parent class params have to be repeated in child class. – Jake11 Jul 14 '19 at 09:12
But one of the child class's params now is an instance of the class it extends? How does that make sense? – jonrsharpe Jul 14 '19 at 09:12
abstract class cannot be instantiated. – manish kumar Jul 14 '19 at 09:29
@manishkumar answer to this question you can find here: https://stackoverflow.com/questions/39038791/inheritance-and-dependency-injection solution is to use injector for dependencies and then super this injector for class that is extended by super class, sorry for wrong answer – Jake11 Jul 14 '19 at 09:59

How to extend a service in angular 7

1 Answers1