Issue in Ionic 3 Angular 4: Module `jsonwebtoken` Cannot Be Located

Can someone help me with an issue I'm facing while trying to import jsonwebtoken from this source? I keep receiving the error message 

Cannot find module 'jsonwebtoken'
in my Ionic 3 app.

I've already tried running rm -rf node_modules, npm install, and yarn install, but my app is still unable to locate this module. I have also verified that node_modules/@types/jsonwebtoken has been downloaded and exists.

The way I am importing it is as follows:

import * as JWT from "jsonwebtoken";

Any assistance provided would be greatly appreciated. Thank you in advance.

angulartypescriptnpmionic3

Answer №1

The reason you are only installing typings is because in the link provided, you have @types/jsonwebtoken. By installing this, you will only have the supported types for your IDE. However, jsonwebotken is meant for server-side usage. To decode a token on the client side, use jwt-decode. You can obtain it from this repository or by running the command npm install jwt-decode --save and then importing it as 

import * as jwtDecode from 'jwt-deocde'
. Furthermore, for Angular, there is a special package available. You can get it from here or by running the command npm install angular2-jwt --save

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

The Google Recaptcha v2 seems to be playing hide and seek within my Angular app

I integrated Google reCaptcha V2 into my Angular application. After following the instructions provided on the official website: https://www.npmjs.com/package/ngx-captcha and adding the Google reCaptcha v2 key, I encountered an issue where the captcha div ...

angularrecaptcha

Tips for successfully passing `--` in pre npm scripts

What is the best way to include additional flags in an npm command that contains a pre configuration? "prebuild": "npm run build:vendor", "build": "cross-env NODE_ENV=production webpack --env.production -p", After running npm run build -- --env.producito ...

bashshellnpmwebpacknpm-scripts

Tips for concealing a Div in an HTML document with the help of Angular

I need a solution to hide a div that contains only titles, while the div with the actual content is located in a different section <div> <b>Delivery Info\</b> <div class="custom-control">Delivery ID: </div ...

javascripthtmlangularhide

The angular library is throwing an error stating that it cannot access the property myProperty of

Currently, I am utilizing the ngx-audio-player library which offers a simple and streamlined playlist functionality. Everything functions properly when I hardcode the songs into the playlist. However, my requirement is to load them dynamically. To achieve ...

angular

The data type 'string' cannot be assigned to type [object]

Here's a scenario using an interface: interface Order { symbol: string side: string price: number quantity: number } In my code, I have a section where I am trying to access values within a table. However, it's giving me an error saying tha ...

javascriptreactjstypescript

Objects That Are Interconnected in Typescript

I have been delving into TS and Angular. I initially attempted to update my parent component array with an EventEmitter call. However, I later realized that this was unnecessary because my parent array is linked to my component variables (or so I believe, ...

javascriptangulartypescript

Adding elements from one array to another array of a different type while also including an additional element (JavaScript/TypeScript)

I'm having trouble manipulating arrays of different types, specifically when working with interfaces. It's a simple issue, but I could use some help. Here are the two interfaces I'm using: export interface Group { gId: number; gName: st ...

javascriptarraysangulartypescript

Steps to generate an accurate file order using Typescript:

Consider the scenario with two typescript files: In File a.ts: module SomeModule { export class AClass { } } And in File b.ts: module SomeModule { export var aValue = new AClass(); } When compiling them using tsc -out out.js b.ts a.ts, there are ...

typescript

Using the set() method in Firestore with the merge option does not function properly when implemented in Node.js

const user = {name : myUsername}; databaseRef.set(user, { merge: true }); An error is occurring which states: Invalid use of type "undefined" as a Firestore argument. Despite following the Firebase documentation here, and seeing others use it in online ...

javascriptnode.jsfirebasenpmgoogle-cloud-firestore

Angular Error: Issue: Unable to locate the specified column ID within the TS file

Within my application, I have a table containing multiple columns. I am attempting to populate it with the appropriate data, but upon opening the page, I encounter the error Could not find column with id "PublishedParty", despite it being present ...

javascripthtmlangulartypescript

Having trouble with the npm Fluid Player installation

I am attempting to integrate Fluid Player into my Angular application Using - npm i fluid-player However, I'm encountering this error ...

node.jsangulartypescriptnpmfluid

Retrieve an array that is returned from a function in TypeScript

In this function, I am trying to access the value of the 'value' array outside the function in the same class. This function is being called in a setter method where the ID is set like so: setId(id:string){ this.onChange(id)} class ModalShowComp ...

javascriptangulartypescriptobservableobserver-pattern

An issue has been detected by Zone.js where the ZoneAwarePromise `(window|global).Promise` has been unexpectedly replaced

I have recently integrated the Angular2 quickstart code into my existing webpack setup, but I seem to be facing an issue where something is interfering with the promise from zone.js, resulting in an error. Based on my research on Stack Overflow, it appears ...

javascriptangulartypescriptwebpack

Uninstalling Puppeteer from npm can be done by running a

Some time ago, I had integrated Puppeteer into an Express API on Heroku using their Git CLI. Recently, I decided to remove Puppeteer from the package.json file and went through the npm install process before trying to push to GitHub. However, it appears th ...

javascriptnpmpuppeteer

The Ionic view is not reflecting updates in real-time when there are changes to the component properties

Having an issue with updating stock data on the view in my ionic 3 project. I am able to see frequent updates in my component and console, but these changes are not reflected on the view as frequently. For every 10 updates in the component, only 1 update i ...

angularionic2ionic3angular2-servicesionic4

An issue arises in Angular 17 where the view does not refresh when using setInterval, accompanied by the NG0500

I am currently working on a countdown timer feature where I want to continuously update the 'seconds' value in real-time, but I'm facing an issue with the UI not reflecting these updates. Whenever I attempt to implement this without utilizi ...

angularviewtimersetintervalcountdown

Activate submit button when checkbox is chosen in Angular 5

When the checkbox is selected, I want to enable the submit button. This functionality is being implemented in Angular 5 with TypeScript. Below is my current code: <mat-checkbox>I agree to Terms & Conditions</mat-checkbox> <button mat- ...

typescriptangular5

Struggling to set up karma proxy on the main website directory

I'm facing an issue with configuring karma to proxy a file at the root of my website. I have an embedded Ace editor in one of my Angular components, and it is looking for a file at http://localhost:9876/worker-html.js. Even though I have successfully ...

angularproxyjasminekarma-jasminekarma-runner

proceed to another page after choosing specific dates for submission

I have created the following code to build a booking calendar. I would like it so that when I click on submit, it will redirect to a different page by navigating. The function should check if the start date is greater than the current date and the end date ...

angulartypescriptangular5

How can I hide a mat card in Angular when the array is empty?

Below is the code snippet from my Angular HTML file: <mat-card *ngFor="let getCartDetail of getCartDetails" style="margin-bottom: 1em; " > <div class="card-container"> <mat-card-ti ...

angulartypescript