What function is missing from the equation?

I am encountering an issue with an object of type "user" that is supposed to have a function called "getPermission()". While running my Angular 7 application, I am getting the error message "TypeError: this.user.getPermission is not a function".

Here is what I believe to be the crucial context:

This is my user class:

export class User  {
   ...
   public getPermission(): boolean {
      return true;
   }
   ...
}

I have a service responsible for fetching a user from an asp.net core API:

 getUser(id): Observable<User> {
   return this.http.get<User>(this.baseurl + 'user/' + id);
 }

Next, I have a resolver implementation:

@Injectable()
export class UserEditResolver implements Resolve<User> {
   constructor(private userService: UserService, private authService: AuthService,
       private router: Router,
       private alertify: AlertifyService) {}

   resolve(route: ActivatedRouteSnapshot): Observable<User> {
       return this.userService.getUser(this.authService.decodedToken.nameid).pipe(
           catchError(error => {
               this.alertify.error('Problem retrieving your data');
               this.router.navigate(['/users']);
               return of(null);
           })
       );
   }
}

Lastly, in my component, I make a call to the getPermission function:

 user: User;

 ngOnInit() {

   this.route.data.subscribe(data => {
     this.user = data['user'];
   });

   const t: boolean = this.user.getPermission();
 }

Despite successfully loading properties from the API, the error "TypeError: this.user.getPermission is not a function" persists.

I would greatly appreciate any insights into why this might be happening!

Answer №1

TypeScript operates solely during the compilation process and has no impact on runtime behavior.

Making a call like this.http.get<User>(...) will not automatically transform the retrieved data into an instance of the specified User class.

You must manually parse the input and create a new instance of the User class yourself.

Answer №2

instantiate the class

person: Person = new Person();

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

Nesting two ngFor loops in Angular using the async pipe leads to consistent reloading of data

In my Angular application, I am trying to retrieve a list of parent elements and then for each parent, fetch its corresponding children (1 parent to n children). Parent Child1 Child2 Parent Child1 Parent3 Child1 Child2 Child3 Initially, I succes ...

Troubleshooting Angular 2 with TypeScript: Issue with view not refreshing after variable is updated in response handler

I encountered a problem in my Angular 2 project using TypeScript that I could use some help with. I am making a request to an API and receiving a token successfully. In my response handler, I am checking for errors and displaying them to the user. Oddly en ...

Error: Property 'xxx' is not a valid attribute for this type

Hey there! I recently converted my React Native JavaScript project into TypeScript and everything seems to be working fine. However, I'm encountering some warnings that I could use some help with. Specifically, I need assistance on how to properly pas ...

The use of credentials is not allowed when the ‘Access-Control-Allow-Origin’ CORS header is set to ‘*’

My Java web application makes CORS requests where the browser performs an OPTIONS preflight before the actual request. The format of each request is as follows: Host: localhost:8080 User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:63.0) Gecko/2 ...

Using Angular to call a separate function from within a click event handler within the same function itself

It seems like the issue at hand is related to the keyword "this" not being assigned as expected. I am currently using Angular 5 along with a WordCloud package. You can find more information about it here. There's a click callback function that retur ...

Using Arrow Functions in Angular 2 Typescript with Support for IE11

Are arrow functions in Typescript for Angular2 compatible with IE 11? I have come across information stating that arrow functions in javascript may not be supported in IE 11, but I am uncertain if the same applies to Typescript. ...

Encountering unexpected compilation errors in an Angular 9 project while utilizing safe null accessing and null coalescing features?

It's really strange what happened with this project. It was working perfectly fine yesterday, and I even left 'ng serve' running after finishing my work without any issues. However, today when I tried to compile the app, I ran into problems ...

In ReactJS with TypeScript, declaring a constant response after calling the login function using the await keyword

Currently tackling a task in React and Typescript where I am logging in as a user. Encountering an issue when trying to access the response variable, which leads to the following error: Object is of type 'unknown'.ts(2571) const response: unknow ...

Establishing a server in Node.js alongside an Angular 2 frontend by harnessing the power of Typescript

I'm looking to deploy my web application on IBM Bluemix with Angular 2 using Typescript for the frontend and Node.js for the backend. Can you advise me on how to configure the server, connect it to the frontend, and specify which transpiler I should u ...

Unable to load the Angular material v15 prebuild legacy theme for import

After updating Angular and Material to version 15, I encountered an issue when trying to import legacy prebuilt theme for using legacy components. Unfortunately, importing the material prebuilt-themes that are not legacy ones allows the compiler to build ...

Warnings during npm installation such as incorrect version numbers and missing descriptions

There are some warnings appearing in the command line that I need help with: $ npm install npm WARN Invalid version: "x.0.0" npm WARN myFirstAngular2Project No description npm WARN myFirstAngular2Project No repository field. npm WARN myFirstAngular2Projec ...

Communicating between Angular and Node (MEAN) involves transmitting basic user information, such as email address and user ID, from Node

I've encountered an issue with the following code snippet: // Node.js router.get('/users/all', authenticate, (req, res) => { User.find({some query}).select('firstName lastName email').then((users) => { res.send(u ...

How to make a node application run as an executable within an NX workspace

The structure of an NX workspace really caught my attention, which led me to start using it for a new CLI project I was working on. I began by setting up a @nrwl/node:application, but I'm currently facing some issues trying to make it executable. I ...

Encountering a Next.js event type issue within an arrow function

After creating my handleChange() function to handle events from my input, I encountered an error that I'm unsure how to resolve. Shown below is a screenshot of the issue: https://i.sstatic.net/fWJA2.png I am currently working with Next.js. In React ...

Navigating Angular: Strategies for Managing Nested FormGroups in the HTML Template

I have recently started learning Angular and am currently working on creating a form for gathering user details. Imagine a scenario where a user can have a "friend" linked to them. This is how my FormGroup looks in a simplified version: userInformation = ...

What is the best way to change a blob into a base64 format using Node.js with TypeScript?

When making an internal call to a MicroService in Node.js with TypeScript, I am receiving a blob image as the response. My goal is to convert this blob image into Base64 format so that I can use it to display it within an EJS image tag. I attempted to ach ...

Enhance band tooltips in highcharts angular with a personalized touch

I am currently working on customizing the band names in a highcharts graph within an Angular environment. The code snippet I have included below is intended for this purpose, but unfortunately, it is returning undefined for the band name. You can find the ...

The Angular framework's structure is loaded in a combination of synchronous and asynchronous ways once the primeng tableModule

Encountered this error while trying to load the TableModule from primeng into my components module file and running 'npm run packagr': Maximum call stack size exceeded To address this, I switched my primeng version from primeng12 to primeng11.4. ...

Is it possible to verify or authenticate the properties received directly from the associated type or interface?

Looking for a more efficient way to handle validation in my component that takes an array of tabs and children as props. I would like to check if the children provided are the same length as the tabs array directly from the type declaration or any cleaner ...

Combine all JavaScript files into a single file for an Angular 2 application

I've been working on an Angular 2 application. While I can successfully minify the TS/JS files using "uglify", I'm wondering if there's a way to combine all JS files into a single file for faster rendering. ...