(24,42): Oops! Looks like we hit a snag. The property 'jwt_decode' is not recognized on the 'Window' type

Currently, I am utilizing the angular2-authentication-sample repository for authentication purposes. Although I have not removed the client side jwt_decode and jwt_encode functions from the project, I am encountering an error in the file home.ts. The error message reads:

(24,42): error TS2339: Property 'jwt_decode' does not exist on type 'Window'.

home.ts

import { Component } from '@angular/core';
import { CORE_DIRECTIVES } from '@angular/common';
import { Router } from '@angular/router';

const styles = require('./home.css');
const template = require('./home.html');

@Component({
    selector: 'home',
    directives: [ CORE_DIRECTIVES ],
    template: template,
    styles: [ styles ]
})

export class Home { }

Answer №1

I encountered a similar problem and resolved it by utilizing the JwtHelper class.

To start, you need to import:

import { AuthHttp, JwtHelper } from 'angular2-jwt';

Then, you can instantiate it like so:

jwtHelper: JwtHelper = new JwtHelper();

Here's how you can use it in your code:

constructor() {
    this.token = localStorage.getItem('id_token');

    // this.decodedJwt = this.jwt && window.jwt_decode(this.jwt);

    this.decodedJwt = this.jwtHelper.decodeToken(this.token);
    this.jwtDate = this.jwtHelper.getTokenExpirationDate(this.token);
    this.jwtExpired = this.jwtHelper.isTokenExpired(this.token);
}

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

Angular's reactive forms seamlessly align the form's values with the corresponding model

I am working with a model defined by an interface. export interface MyModel { id: number; enabled: boolean; name: string; city: string; country: string; } When I submit the reactive form, all the values in form.value are of string type. I attem ...

Ways to arrange the JSON array by keys in reverse order utilizing Angular

let data = { '2021-07-20-21:10': { sends: 1, recvs: 1, notSents: 0, rejects: 0, xptSkips: 0, timeouts: 0, appErrors: 0, responseTimeAvg: 172, responseTimeMax: 172, ...

Design interactive images in NativeScript

I need assistance setting up clickable images in NativeScript. My goal is to arrange 5 images horizontally, and when one image is clicked, the images to its left should change their values. Here's what I've attempted: <Label col="0" row="0" ...

The dilemma of disappearing URLs during navigation in Angular

I'm facing challenges with routing in Angular within a specific project. Here is the function from a certain component. After subscribing to the currentCounter$ stream and extracting the value from it, I need to pass it down to the router, which then ...

Tips on expanding the express request interface

Currently, I am working with express and typescript. To enhance my express request interface, I have implemented the following code snippet:- Middleware.ts import { NextFunction, Request, Response } from 'express'; // eslint-disable-next-line @ ...

Unexpected Failure in Angular 7 Compilation

My angular app was functioning perfectly, but suddenly it stopped compiling. I received the following message: ng build --prod 10% building modules 3/6 modules 3 active ...ogress\kendo-theme-default\dist\all.cssBrowserslist: caniuse-lite i ...

Linking key value pairs through a TypeScript interface

coding interface StoreActions { setUserName: string actionOne: string[] actionTwo: { testValue: string } } interface CustomActions extends AnyAction { typeOfAction: keyof StoreActions // additionalData:??? } The attribute typ ...

No data is generated when choosing from the dropdown menu in mat-select

I have a select function where all options are selected, but the selected sections are not shown. When I remove the all select function, everything works fine. Can you help me find the error? Check out my work on Stackblitz Here is my code: Select <m ...

The solution to enabling Type checking in this scenario is simple: Begin by addressing the issue of "Not assignable," followed by resolving any

After subscribing to an observable projected by a BehaviorSubject from a service, I encountered the following errors when trying to assign the subscribed value to a local variable: error TS2322: Type '{}' is not assignable to type 'DatosAdmi ...

What's preventing this function from deducing the type?

I'm currently utilizing the "openapi-typescript" tool to automatically generate all the types based on my swagger server specifications. In this process, I have created a Type called "GetUrls" which contains all the keys associated with the "get" meth ...

What is the best way to define a margin according to the size of the device being used

I am working on an angular/bootstrap web app and need to set a left margin of 40px on md, xl, lg devices and 0px on sm device. I attempted to create a spacer in styles.scss like this: $spacer: 1rem; .ml-6{ margin-left:($spacer*2.5); } Then in my HTML, ...

How can I retrieve all the recipes associated with a specific user (id) using ASP.NET Core 3.1.1 MVC and Angular?

Currently delving into ASP.NET MVC, I am immersed in building a single-page application using ASP.NET Core 3.1.1 with APIs. Within my User.cs file, there exists a collection of the user's Recipes. Specifically, within my User class, there is a prope ...

The issue of Angular 2.3.1 custom validator promise not resolving

I am currently working on implementing a sign up form in which I need to check if the username is already taken or not. To accomplish this, I have decided to use promises. The structure of my sign-up component is as follows: import { Component, OnInit } f ...

Exploring the functionality of the Angular dist folder after building with multiple projects

In my current Angular project, I've divided the application into three separate applications for improved build time optimization - App1, App2, and App3. When testing locally, I individually build each project and then manually copy the main.js files ...

Conceal the badge identification number in React and Typescript if it equals zero

I am currently working on a Badge component that I would like to hide when the number displayed is 0. After experimenting with this on codesandbox, using "invisible" as a prop along with its corresponding class, I am struggling to figure out how to apply ...

Chrome is causing issues with the width of the Google Maps iframe set to 100%

I have included a Google map on my website using an iframe. Here is the code I am using: HTML <div class="iframe-maps"> <iframe src="https://www.google.com/maps/d/embed?mid=1Z_DcQ-f4EdnEwL6sRKfLCYCj5P8&hl=en" width="100%" height="100%"&g ...

Guide on Clearly Defining a Return Type in Angular4/ionic3

How can I specify a specific return type to only retrieve the necessary data from a mongodb server using nodejs? Some challenges I'm encountering: 1. The nodejs server always returns an array of json data, forcing me to access the data in ionic3 as ...

In the context of Angular applications, how can a state be defined?

Exploring the world of NgRx for the first time and diving into its documentation, I stumbled upon this statement: "State is a single, immutable data structure." In plain terms, what exactly does "state" refer to? Can you provide some basic examples to ...

You have to include the necessary request body in the front-end request to address the

After successfully testing a POST request to add a new entity to the database from my project back-end using Postman, I encountered an error when trying to do the same from the front UI (I'm using Angular 4): Required request body is missing. Failed ...

Combine identical arrays of object keys into one unified array

https://i.sstatic.net/A2r5c.png I am striving for this particular output [ productId:106290, productserialno:[{ "12121", "212121" }] ] ...