Angular 7 class inheritance & httpClient

Question

Ok, so I've realized that my services are very copy and paste. So I wanted to take a stab at super classes and inheritance in Angular. Not going as well as I want it to. I'm really getting hung up on the constructor and super calls. TS compiles correctly and with no errors, but the is what I get in console.

core.js:12632 ERROR Error: Uncaught (in promise): TypeError: this.http.get is not a function

Now, I'm assuming this is going to continue for all of my dependencies.

Here is my BaseService Class:

    import {EventEmitter, Output} from '@angular/core';
    import { environment } from '../../environments/environment';

    export abstract class BaseService {
        @Output() saving = new EventEmitter();
        constructor(
            public api_url: string,
            public success_message: string,
            public success_url: string,
            public nav_to_view: boolean,
            public http,
            public toaster,
            public router,
        ) {
            this.api_url = environment.api + this.api_url;
        }

        list() {
            return this.http.get(this.api_url);
        }
   }

and here is my service that is extending BaseService:

import {Injectable} from '@angular/core';
import {BaseService} from '../../core/base.service';
import {HttpClient} from '@angular/common/http';
import {ToastrService} from 'ngx-toastr';
import {Router} from '@angular/router';
@Injectable()
export class ModulesService extends BaseService {
    constructor() {
        super('/modules', 'Manufacturer Saved!', '/modules', false, HttpClient, ToastrService, Router);
    }
}

What am I not understanding? Thank you in advance!

Hint: Specify types everywhere, and you'll have compilation error telling you what is wrong. You're shooting yourself in the foot by not using types. Also, learn the principle of dependency injection (dependencies are injected using constructor arguments, but your constructor doesn't have any argument). And finally, Outputs only exist in directives, not services. Making everything publis is also a big smell. — JB Nizet
– JB Nizet, Commented Dec 7, 2018 at 13:14

RANJIT PATRA · Accepted Answer · 2018-12-07 13:24:43Z

Specifying Type is missing. If you specify then it will work.

Code for BaseService as below.

import {EventEmitter, Output} from '@angular/core';
import { environment } from '../../environments/environment';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import {ToastrService} from 'ngx-toastr';
export abstract class BaseService {
    @Output() saving = new EventEmitter();
    constructor(
        public api_url: string,
        public success_message: string,
        public success_url: string,
        public nav_to_view: boolean,
        public http: HttpClient,
        public toaster: ToastrService,
        public router: Router
    ) {
        this.api_url = environment.api + this.api_url;
    }

    list() {
        return this.http.get(this.api_url);
    }
}

code for ModulesService as below.

import {Injectable} from '@angular/core';
import {BaseService} from '../../core/base.service';
import {HttpClient} from '@angular/common/http';
import {ToastrService} from 'ngx-toastr';
import {Router} from '@angular/router';
@Injectable()
export class ModulesService extends BaseService {
    constructor(public http: HttpClient,
        public toaster: Toaster,
        public router: Router) {
        super('/modules', 'Manufacturer Saved!', '/modules', false, http, toaster, router);
    }
}

Collectives™ on Stack Overflow

Angular 7 class inheritance & httpClient

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related