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

Can you explain what happens to "npm install" and "npm update" when modifications are made to package.json?

I'm struggling to understand why running the command "npm update" isn't updating my angular-cli to version 7.3.0, but when I use "npm install," it does update it to 7.3.0. Check out the macOS terminal screenshot below showing the upgrade from an ...

Sharing Properties Across Angular Components using TypeScript

Seeking a solution for storing properties needed in multiple components using a config file. For example: number-one-component.ts export class NumberOneComponent { view: any[]; xAxis: number; yAxis: number; label: string; labelPositio ...

Sharing a FormGroup between different components

For my Angular 2+ application utilizing reactive forms, I have a requirement to share the main FormGroup across multiple components. This will allow different sections of the form such as header and footer to be managed independently by separate components ...

Tips for updating property values when calling a TypeScript function

Hello everyone, I am looking to convert a snippet of JavaScript code into TypeScript. JavaScript function newState(name){ var state ={ name : name, age : 0 } return state } function initStates() { this.JamesStat ...

Is there a way to create identical copies of data with the identical names?

Here is the code I have written: this.temp1.push(this.json); for(let i=0; i<this.temp1.length; i++){ if(this.temp1[i].name == this.json.name){ this.orderList[i] = this.json; this.DBorder[i] = this.order_json; } ...

ConcatMap in RxJS processes only the last item in the queue

Currently, I am implementing NGRX with RXJS. Within the effects layer, I am utilizing a concatMap to organize my requests in a queue fashion. However, once the latest request is finished, I aim to execute the most recent item added to the queue instead of ...

When you click on the mat-tab label, it will act as a link and directly open the

I am facing an issue where I have 4 mat-tabs and I want to add one more tab. This additional tab will act as a label that, when clicked, opens a provided link. I have tried the following code but it is not working: <mat-tab label="Statistik ...

The implementation of the "setValue" function from react-hook-form resulted in the generation of over 358,000 TypeScript diagnostics for various types

In my experience, I have frequently used react-hook-forms and `setValue` in various parts of my application without encountering any issues. However, I recently came across a problem while compiling in a newly created branch based on the main branch. Desp ...

How to efficiently display nested object data using Angular Keyvalue pipe

I am facing an issue with a particular HTTP request that returns an observable object containing multiple properties. One of these properties is the 'weight' object which has two key values, imperial and metric. While attempting to loop through ...

Transmitting Filter Choices as an Object for Retrieving Multiple Values within an Angular Application

In my Angular application, I have a function that takes user selections for various filter types and sends a request to the API to retrieve filtered data based on those selections. Each filter type returns values in an array format, allowing users to selec ...

Differentiating Between Observables and Callbacks

Although I have experience in Javascript, my knowledge of Angular 2 and Observables is limited. While researching Observables, I noticed similarities to callbacks but couldn't find any direct comparisons between the two. Google provided insights into ...

Enhance the visual appeal of incoming data using Angular Material's dynamic styling feature

Is it possible to enhance the text with some CSS styling to make each item stand out like in this example: https://i.stack.imgur.com/kSyZE.png I prefer not to include a cross button or provide users with the option to add tags. The data is coming from a R ...

I am puzzled by this error in Typescript: "Why does the element have an 'any' type when the Object type lacks an index signature?"

Looking to extract an array of keys from an object with nested properties, my current code: public static getKeys(obj: Object) { let keys: string[] = []; for (let k in obj) { if (typeof obj[k] == "Object" && obj[k] !== null) { ...

The function cannot be called on a type that does not have a callable signature. The specified type, 'number | Dispatch<SetStateAction<number>>', does not have any compatible call signatures

Currently, I am working on setting up state to be passed through context in React using hooks. However, when I attempt to use the dispatched state updater function, an error is thrown: Cannot invoke an expression whose type lacks a call signature. Type &a ...

What data structure is used to store HTML elements in TypeScript?

Currently, I am dealing with a typescript variable that holds the outcome of a query on the DOM: let games = document.getElementsByTagname("game"); My uncertainty lies in identifying the appropriate type for the resulting array. Should I expect an array ...

Issue: The keyword in React/React-Native is returning a boolean value instead of the expected element object

I've recently delved into learning and coding with React, and I'm encountering a bug that I need help fixing. The issue lies within my application screen where I have two checkboxes that should function like radio buttons. This means that when on ...

What are the steps to launch a Firebase application without requiring user authentication?

I have a unique firebase app/game that does not require authentication. My main goal is to allow anyone to easily access the website or mobile app and start playing right away, without the need for user IDs. I have been receiving numerous emails from Fireb ...

What is the best way to send ServerSideProps to a different page in Next.js using TypeScript?

import type { NextPage } from 'next' import Head from 'next/head' import Feed from './components/Feed'; import News from './components/News'; import Link from 'next/link'; import axios from 'axios&apo ...

My goal is to develop a secure login system with authentication on the Angular platform

login(data: any) { this.user.getUsers().subscribe( (users) => { const user = users.find((u) => u.username === data.username && u.userpassword === data.password); if (user) { // Valid username and password, ...

The type 'Observable<false>' cannot be assigned to the type 'Observable<boolean>'

Our team had been using Knockout.js (v3.5.0) along with its TypeScript definitions without any issues until TypeScript 4.6.2 came along. It seems that the problem goes beyond just the definitions file, possibly due to a change in how TypeScript handles boo ...