You cannot call this expression as it does not have any callable signatures. The type 'UserService' does not have any call signatures

Greetings,

Despite my efforts to resolve this error by researching similar cases, I am unable to apply the solutions to my particular issue (due to being new to this). The problem arises when attempting to invoke a function within user.service.ts from my add-new-message component.

Here is the content of user.service.ts:

import {Injectable} from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import {GLOBAL} from './global';
import {User} from '../models/user';

@Injectable()
export class UserService{
public url:String;
public identity;
public token;
public stats;
public user;

constructor(public _http: HttpClient){
    this.url =GLOBAL.url;
    
}

getIdentity(){
    let identity = JSON.parse(localStorage.getItem('identity'));

    if(identity != 'undefined'){
        this.identity = identity;
    }else{
        this.identity= null;
    }

    return this.identity;
}

getToken(){
    let token = localStorage.getItem('token');
    if(token != "undefined"){
        this.token = token;
    }else {
        this.token = null;
    }

    return this.token;
}

As for add.component.ts:

import {Component, OnInit, DoCheck} from '@angular/core';
import {Router, ActivatedRoute, Params} from '@angular/router';
import {Follow} from '../../../models/follow';
import {Message} from '../../../models/message';
import {MessageService} from '../../../services/message.service';
import {FollowService} from '../../../services/follow.service';
import {User} from '../../../models/user';
import {UserService} from '../../../services/user.service';
import {GLOBAL} from '../../../services/global';


@Component({
selector: 'add',
templateUrl: './add.component.html',
providers: [
FollowService, MessageService, UserService
]
})

export class AddComponent implements OnInit {
public title: string;
public message: Message;
public identity;
public token;
public url: string;
public status: string;
public follows;


constructor(

    private _route: ActivatedRoute,
    private _router: Router,
    private _followService: FollowService,
    private _messageService: MessageService,
    private _userService: UserService

    ){
    this.title = 'New message';
    this.message = new Message('','','','',this.identity._id,'');
    this.identity = this._userService().getIdentity();
    this.token = this._userService().getToken();
    this.url = GLOBAL.url;
}

ngOnInit(){
console.log('add.component loaded');
}

}

Both

this.identity = this._userService().getIdentity();
and
this.token = this._userService().getToken();
are resulting in the same error:

This expression is not callable.
Type 'UserService' has no call signatures.

41   this.identity = this._userService().getIdentity();

Thank you for any assistance provided.

Answer №1

Instead of calling the _userService as a function/method, simply update your code like so:

this.identity = this._userService.getIdentity();
this.token = this._userService.getToken();

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

Typescript gives you the ability to create a versatile writing interface that includes all

Think about this: interface Options { length?: number, width?: number } interface Action { performAction ({length, width}: Options): void } const myObject: Action = { performAction ({length, width}) { // do something without returning ...

An essential aspect of utilizing ngrx is understanding how to access the previous and current state to effectively compare them when subscribing to the store

Within my component, I am subscribing to the ngrx store for changes in a specific state. I need to implement a condition where if the current state is different from the previous state, then I should perform certain actions. Is there a way to retrieve the ...

Alerts created with the AlertController in Ionic 4 Angular are not displaying the message when the

After creating a reliable alert service for my Ionic 4 project, I encountered an issue when building the release version of the app. Despite functioning perfectly in other environments like "ionic serve" and "ionic cordova emulate", the message part of the ...

tips for deactivating routerLink functionality on anchor elements

Working on an Angular application that requires me to create an image slider. However, due to the presence of router links in the application, the anchor tags in the image slider keep redirecting. I want to prevent this redirection and instead successful ...

Enhancing User Type Functionality with Passport.js

I am currently working on implementing correct User typing with passport.js. Within the Express namespace, Passport defines the User interface as an empty interface. You can view the details here: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/22 ...

"Frustrating issue with Firebase-admin dependency farmhash-modern resulting in webassembly error

Facing an issue while setting up firebase-admin SDK on my nextjs + TS project. Every time I try to call a SDK function, I encounter a webAssembly error. Specifically, when trying to configure a middleware for the server-side API and calling the verifyIdTok ...

Using an interface in Typescript can greatly enhance the structure and organization

I am currently working on a project that involves using Node JS and Typescript. Within this project, I have designed a class and an interface to manage and define the data structure. I am now looking for guidance on how to implement these in a practical sc ...

In Angular 8, create a custom message for ngFor to display when the data from the pipe filter is empty

One of my components utilizes a custom pipe called PlanCodePipe to filter documents based on plan codes. However, there are times when the filter results in 0 matches. <div *ngIf="(StatementData$ | async) as stmtData; else stillLoading"> ...

Is Angular 5 ngx-permissions causing permissions to be deleted upon page refresh? Learn how to prevent this issue

https://i.stack.imgur.com/P1dr1.png https://i.stack.imgur.com/ktmB3.png Permissions Disappear after Page Refresh Is there a way to prevent permissions from being deleted upon refresh? ...

The functionality of the Request interface appears to be malfunctioning

Hey there, I'm currently working on building an API using Express and TypeScript. My goal is to extend the Request object to include a user property. I've done some research on Google and found several posts on StackOverflow that explain how to d ...

Tips for launching an older Angular project on a local server

I'm currently attempting to run an older project stored on the team Drive, but I am uncertain about which node version is required. Is there a method for me to determine this information within the code itself or through the terminal? https://i.sstat ...

Instructions on utilizing *ngFor for every category I have

Seeking assistance with a specific issue. I currently have four labeled tabs, each containing projects. My goal is to ensure that when I save a project, it remains in the same tab where I initiated the save operation, rather than appearing across all tabs. ...

The blur event in Angular Material's mat-date-range-input does not trigger if the End Date is not selected

I am currently utilizing Angular 15 along with Angular Material 14. The code for the DatePicker control is shown below. <mat-form-field class="datepicker-widget" appearance="fill"> <mat-date-range-input [formGroup]="d ...

The latest alpha version of Angular2 Material Design (alpha.9-3) encountered a "404 not found" error when trying to access @angular

After carefully following the steps outlined in the angular material2 Getting Started guide to install @angular/material, I made updates to package.json, app.module, and systemjs.config using Atom. Specifically, I added the line '@angular/material&apo ...

Tips for deleting a dynamic property from a predefined TypeScript base class

Let's say I have a third-party base class structured like this: export class Base { [k: string]: any; foo(): number; bar(): number; }; I need to inherit from this base class, but I want to remove the dynamic key in my object. Is there a ...

The Bootstrap navigation bar is failing to expand

Struggling to set up a responsive navbar on Bootstrap, but it's not expanding on mobile devices. The button doesn't seem to be working when clicked. <nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-left"> ...

Radio buttons may not appear initially upon loading the first page

Can anyone explain why the radio buttons are not visible when the page first loads? I am using Angular Material's mat-radio-buttons. https://i.sstatic.net/qdDEy.png Click here for the code ...

Is there a substitute for useState in a Next.js server component?

With my static site at , the only interactive feature being the dark mode toggle, I understand that using useState is not feasible in a server component. export default function RootLayout({ children }: { children: React.ReactNode }) { const [darkMode, ...

Storing a JSON file for HTTP GET requests

I'm looking to integrate a JSON file into my Angular application using an HTTP GET request. The idea is to store the static JSON file in my Amazon S3 bucket with public access. However, I'm facing challenges when trying to consume it within my A ...

What could be causing the malfunction when using TypeScript's generic T with any?

The playground demo The diff: A: function<T extends { status: number }> () {} B: function<T = any> () {} the B does not have access to T's property, while the A function only accesses T's status. Thank you ...