Is it possible to create an Angular 2 service instance without relying on the constructor method?


I'm struggling to utilize my ApiService class, which handles API requests, in another class. Unfortunately, I am encountering a roadblock as the constructor for ApiService requires an HttpClient parameter. This means I can't simply create a new instance like this: `http = new ApiService(new HttpClient(), globals)`

ApiService:

import { Injectable } from '@angular/core';
import { HttpClient, HttpRequest } from '@angular/common/http';
import { Globals } from './globals';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor(private http: HttpClient, private globals: Globals) {}

  get(url : string, params: {}){
    return this.http.get(this.globals.api_url.concat(url), {params: params});
  }

  ...
}

Class invoking ApiService:

export class UploadAdapter {
    http: ApiService;
    constructor() {}

    upload() {
           //Encountering an error here stating "cannot read property 'post' of undefined"
       http.post('api_url'.concat('/medias/upload'), {}, {})
         .subscribe((data) => {
            //do stuff here.
         });
    }



}

Answer №1

Make sure to properly include the service in your component

Your UploadAdapter constructor should be defined as follows:

constructor(private http: ApiService) {}

Furthermore, remember to call

this.http.post

Instead of just using

http.post

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

Is there a way to remove an event listener once the associated button has been clicked within the given code?

Is there a way to prevent this event from triggering once the "dispensed" button is clicked in another module? Here is the code snippet: stopDrugOrder(e: Event, drugOrder: any, drugName: string) { const confirmDialog = this.dialog.open(SharedConfirmat ...

Is the component experiencing issues with its style functionality?

I am attempting to add CSS styles to app.component.ts using the :host property, but I am not seeing the desired results. The CSS is being applied, but not correctly. .ts export class AppComponent { title = "Default Title" data = 'This is defaul ...

Integrating Constant Contact API into a Next.js application

I'm trying to integrate the Constant Contact API into my Next.js application. I've looked through the documentation, but it only provides examples for PHP and Java. How can I effectively use the authentication flow and create an app on the dashbo ...

How can you verify the data type of an object without resorting to type guarding

I have a situation where I need to deal with different types of objects. export interface A { links: number name: string } export interface B { cat: boolean name: string } Initially, I considered using this method: const IsTypeB = (obj: any): obj ...

Encountering a "404 not found" error when trying to update private packages with ng update

I am in the process of updating my Angular app from version 13 to 14, which involves a private package called company-package hosted at company.com/.... Unfortunately, this package is not scoped and does not start with an @... My npm version is currently ...

Combining the redux toolkit function createAsyncThunk with Angular's HttpClient by leveraging the ApiService

Currently, I am working on incorporating @reduxjs/toolkit into an Angular project. Is there a way to pass an Angular service as a parameter to the callback of createAsyncThunk instead of utilizing fetch directly? I referenced the documentation for an exa ...

Identifying memory leaks caused by rxjs in Angular applications

Is there a specific tool or technique available to identify observables and subscriptions that have been left behind or are still active? I recently encountered a significant memory leak caused by components not being unsubscribed properly. I came across ...

Issues arising with code splitting using React HashRouter in a project utilizing Typescript, React 17, and Webpack 5

Encountered build issues while setting up a new project with additional dependencies. package.json: { "name": "my-files", "version": "1.0.0", "description": "App", "main": " ...

Tips for sorting through the properties of the Record<K, T>:

Let's say we have the following data stored in a record: export const MenuData: Record<Header, HeaderInfo> = { val1: { message: 'xyz', buttonText: 'txt', buttonUrl: '/url-abc', }, val2: { messa ...

access denied on image links

While developing a web app with Angular5, I encountered an issue regarding retrieving image URLs from the 4chan API. Each post in my database contains an image URL, however, when I try to access it through my app, I receive a 403 forbidden error in the con ...

Guide to Making a Basic TypeScript Metadata Tag in Your Code

I'm looking for a way to format certain fields before sending them to the server-side. My goal is to serialize specific fields of my TypeScript classes using custom serializers. An example of what I'm aiming for is as follows: export class Pers ...

The Angular Animation feature seems to function properly only upon the initial click

Why does the animation (translateX) only work on the first click in the stackblitz example provided? How can I make it work every time? Thanks for any help! https://stackblitz.com/edit/angular-ivy-p9strz ...

What mechanism allows Angular 2 to identify the parent instance without the need for explicit coding?

Can anyone provide some insight for me please? I have been following this example to create a simple wizard app in Angular 2. Everything is working smoothly, but what confuses me is the constructor in the file called my-wizard-step.ts. How does the private ...

Replacing URLs in Typescript using Ionic 3 and Angular

Currently facing some difficulties getting this simple task to work... Here is the URL format I am dealing with: https://website.com/image{width}x{height}.jpg My objective is to replace the {width} and {height} placeholders. I attempted using this func ...

Angular 5 is reporting a 404 Not Found error in response to the HTTP request to http://localhost:4200/api/

Starting my journey in Angular 5, I attempted to fetch a list of Cities from a JAX-RS API and encountered the following error : Http failure response for http://localhost:4200/api/: 404 Not Found Below are the files I am currently working with : ville ...

Leverage the VTTCue Object in an Angular2 project using Typescript

I am looking to dynamically load subtitles onto a video. let subs:TextTrack = video.addTextTrack('subtitles'); for (let dataSrt of dataSrts) { let cue: any = new VTTCue( dataSrt['startTime'], da ...

The module "react-leaflet" is showing a type error because it does not have a exported member named "useEventHandlers"

My Next.js application is built with TypeScript and React-Leaflet. Everything runs smoothly when I start my development server using npm run dev, no errors whatsoever. However, the problem arises when I attempt to build the project using npm run build. An ...

Angular 14 introduces a new feature that automatically joins open SVG paths when dynamically rendered from a data object

I developed an application to convert SVG code into a JSON object that can be stored in a database. Another app was created to dynamically display the rendered result on a webpage. The rendering output appears as shown in this image: https://i.sstatic.net/ ...

Can the variable name within a function be retrieved?

How can I retrieve the variable name (user_name1 or user_name2) from a sample function (GetUserName()) within itself? This variable name is required to create an object with the same name on the server side for data synchronization purposes. function GetU ...

When running the test, the message "Unable to resolve all parameters for BackendService" is displayed

Upon executing the ng test command, the following error was displayed. This is my service specification: describe('BackendService', () => { beforeEach(() => { TestBed.configureTestingModule({ providers: [ { p ...