Exploring Angular 7: Leveraging class inheritance and the powerful httpClient

It has come to my attention that my services are quite repetitive. In an attempt to enhance them, I decided to delve into super classes and inheritance in Angular. However, I have been struggling with the constructor and super calls. Despite TypeScript compiling without any errors, I am encountering the following issue in the console:

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

I predict that similar problems will arise with all of my dependencies.

Below 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 the service that extends 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 missing? Your help is greatly appreciated!

Answer №1

It seems like there is a missing specification of Type. Make sure to specify it for the code to work correctly.

Here is the code snippet for BaseService:

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);
    }
}

Below is the code for ModulesService:

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);
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to implement a filter pipe on a property within an array of objects with an unspecified value

Currently, I'm tackling a project in Angular 8 and my data consists of an array of objects with various values: let studentArray = [ { Name: 'Anu', Mark: 50, IsPassed: true }, { Name: 'Raj', Mark: 20, IsPassed: false }, { Na ...

I am trying to access a value saved in a service in Angular 8 component and use it in other services. Can anyone help

Setting a value through a component export class UniqueComponent { constructor(service:UniqueService){ } count =0 ; onRefresh(){ this.service.count = 1; } } Using the value in the service UniqueService{ count:any; doSomething(){ //using count ...

What steps do I need to follow to develop a checkbox component that mirrors the value of a TextField?

I am working with 3 components - 2 textfields and 1 checkbox Material UI component. My goal is to have the checkbox checked only when there is a value in one of the textfield components. What would be the most effective way to achieve this functionality? ...

Incorporating Angular for Dynamic Subdomains

Currently utilizing Angular for our project. We are in need of multi tenancy support for URLs containing sub domains. Our product is akin to Slack, where each tenant (client) possesses their own segregated database. Therefore, we desire for them to acces ...

Using TypeScript, we can assign a JSON object to an extended class by leveraging the

Task was to include an additional property. I modified a current class by adding a new property, but when I assign a JSON object from the database, the newly added property disappears. Is there a way to correctly assign a JSON object to a TypeScript class ...

Different return types of a function in Typescript when the parameter is either undefined or its type is explicitly asserted vary

Addressing Complexity This code may seem simple, but the use case it serves is quite complex: type CustomFunction = <B extends ['A']>( param?: B ) => B extends undefined ? 'TYPE_1' : 'TYPE_2' // Usage examples: co ...

Node.js has been giving me trouble as I try to install Inquirer

:***Hey Guys I'm Working on a TypeScript/JavaScript Calculator! ...

How can you position the input cursor at the end of the default text when navigating through fields with the tab key?

I've implemented tab index in the HTML to navigate from one field to another. In the image below, you can see me tabbing from "Revise" to "Link". https://i.stack.imgur.com/vb6L.png However, when I press tab, the default text in the Link field is fu ...

Error: Unrecognized action type in Vuex

I've been encountering some major issues with vuex lately. For some reason, getters, actions, and mutations are not being recognized. In the code snippet below, although fetchFacilities is working fine, addFacility is throwing an error: [vuex] unknown ...

Retrieve JSON web token from HTTP header following backend SAML2 authentication

I am facing a challenge in my Angular application where I need to read the JWT from the HTTP header after being redirected from the backend. Here is an overview of my authentication process: Once the user logs in successfully on the web browser, a POST r ...

Is it feasible to access and modify local files within an Angular project using TypeScript code in the angular component.ts file? If so, how can this be achieved?

My Angular application is built on version 4 or higher. I have a setup in my project where there is a folder containing a txt file and another folder next to it with an angular component.ts file: FolderWithFile -----file.txt ComponentFolder -----person.co ...

Setting up an Angular development environment without relying on the CLI framework

I've been diving into learning Angular and experimenting with demo apps, but I'm finding it difficult to get a clear understanding of how everything works and the underlying concepts. Most resources I come across emphasize using CLI for automatio ...

Custom HTML binding in expanding rows of Angular 2 DataTables

I am currently working on implementing a data table feature that allows for an extended child row to be displayed when clicking the + icon. This row will show additional data along with some buttons that are bound via AJAX before transitioning to Angular 2 ...

Tips for including and excluding personalized Chips from input

Just started learning React/typescript, any assistance would be greatly appreciated Custom Chip (CC.chip) is a specialized Chip UI component that can be utilized as demonstrated below. const [isOpen, setIsOpen] = useState(true); const onClose = Re ...

Access SCSS variable values in Angular HTML or TypeScript files

So, I've been looking into whether it's feasible to utilize the SCSS variable value within HTML or TS in Angular. For instance: Let's say I have a variable called $mdBreakpoint: 992px; stored inside the _variable.scss file. In my HTML cod ...

What might be causing AngularJS to fail to display values when using TypeScript?

I have designed the layout for my introduction page in a file called introduction.html. <div ng-controller="IntroductionCtrl"> <h1>{{hello}}</h1> <h2>{{title}}</h2> </div> The controller responsible for handling th ...

Tips for fixing the TS2345 compilation error when working with React

Attempting to implement the setState method in React has resulted in a compile error. Any solutions to this issue would be greatly appreciated. Frontend: react/typescript articleApi.tsx import axios from 'axios'; import {Article} from '../ ...

HTML elements are failing to display when utilizing the Angular selector

I'm currently working on a project with Angular 2/4 and I'm running into an issue with rendering the app.component.html in the main index.cshtml page. All I can see is the word "loading" that is hard-coded in the index.cshtml file. I've doub ...

How to apply a CSS class to the body element using Angular 2

I am working with three components in my Angular application: HomeComponent, SignInComponent, and AppComponent. The Home Page (HomeComponent) is displayed when the application is opened, and when I click the "Sign In" button, the signin page opens. I want ...

Utilizing the get and set methods to alter the structure of a string, but encountering the issue where the set method is

Upon receiving a datetime through an HTTP request, I need to format it before utilizing it. To achieve this, I utilize the get and set methods in my code. However, I noticed that the set method is never invoked. This is how my component (AdminComponent) l ...