Unable to add an external NPM package for the creation of an Angular library

  • package.json was the first thing I worked on,
{
  "name": "crypto-local-storage",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^12.2.0",
    "@angular/core": "^12.2.0",
    "crypto-js": "^3.1.8",
    "secure-web-storage": "^1.0.2"
  },
  "dependencies": {
    "tslib": "^2.3.0"
  },
  "devDependencies": {
    "@types/crypto-js": "^4.0.2"
  }
}

Next, I made these changes


{
  "name": "crypto-local-storage",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^12.2.0",
    "@angular/core": "^12.2.0"
    
  },
  "dependencies": {
    "tslib": "^2.3.0",
    "crypto-js": "^3.1.8",
    "secure-web-storage": "^1.0.2"
  },
  "devDependencies": {
    "@types/crypto-js": "^4.0.2"
  }
}

However, when trying to import secure-web-storage in my service file using this syntax

import * as SecureStorage from 'secure-web-storage';
I encountered the following error message:

TS7016: Could not find a declaration file for module 'secure-web-storage'.
 'D:/AMS/crypto-local-storage/projects/crypto-local-storage/node_modules/secure-web-storage/secure-storage.js' 
implicitly has an 'any' type.  
Try `npm i --save-dev @types/secure-web-storage` if it exists or add a new declaration (.d.ts) file containing 
`declare module 'secure-web-storage';`

The lack of a @types/secure-web-storage file within secure-web-storage is causing this issue. Any solutions?

Maybe understanding my folder structure would provide more insight,

View Folder Structure Image

javascriptangulartypescriptnpmtypeerror

Answer №1

If you want to optimize your bundle size, consider creating a typings.d.ts file in the src folder and manually adding typings for it. For example:

declare module 'secure-web-storage' {
    export function someFunction(): void;
}

In your TypeScript file, you can then import the function like this:

import { someFunction } from 'secure-web-storage';

This approach helps reduce bundle size compared to using:

const secureWebStorage = require('secure-web-storage');

The latter method increases bundle size and slows down application performance. Learn more about this optimization technique here - https://web.dev/commonjs-larger-bundles/

Answer №2

Having trouble with the issue even after running 

npm install -D @types/secure-web-storage
? In that case, switching from import to require might be the solution.

const secureWebStorage = require('secure-web-storage');

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

Generating HTML content from XML data with the help of JavaScript

Challenge: Attempting to display one question and its four corresponding answers at a time from an XML file. JavaScript code: var xmlDoc, quest, ans, i, n; xmlDoc = loadXMLDoc("questions.xml"); quest = xmlDoc.getElementsByTagName('main'); do ...

javascriptxml

Unable to properly export the HTTP server for socket.io communication

I am facing an issue with my app.js const express = require('express'); const app = express(); const server = require('./server.js'); // app.use const io = require('socket.io').listen(server); io.on('connection', f ...

javascriptnode.jsexpresssocket.iohttpserver

When navigating to a subsite or subfolder, the SVG href ID cannot be located

The topic at hand revolves around another issue: The challenge of creating an Ajax website with links from multiple subfolders. Take a look at the discussion where a solution for that problem was discovered. However, my current dilemma with that solution ...

javascriptjqueryhtml.htaccesssvg

What is the best way to identify if a variable in typescript is null?

Initially, I will perform an HTTP request to a URL in order to retrieve some data. { "data": { "user": { "name": "john", "other": [{ "a": 1, "b": 3 }] } } } My go ...

typescript

The novice image slideshow script in JavaScript is causing all images to disappear and generating errors

Trying to create a simple image slider that pulls information from various sources. CSS and HTML are set up properly, but adding the JavaScript logic causes all images to disappear. The console displays an error saying "Uncaught TypeError: Cannot read prop ...

javascripthtmlcssslideshowweb-maker

Can you explain the purpose of `import type {Node} from 'react';` and how it is used in the App component as: () => Node?

Executing the following command: npx react-native init AwesomeProject When reviewing the App.js file, I came across two lines that confuse me: import React from 'react'; import type {Node} from 'react'; // Line 1 import { SafeAreaVi ...

javascriptnode.jsreactjsreact-nativeimport

Discover the power of the "Load More" feature with Ajax Button on

After browsing through the previous questions and experimenting with various techniques, I've come close to a solution but still can't get it to work. The closest example I found is on Stack Overflow: How to implement pagination on a custom WP_Qu ...

javascriptphpjqueryajaxwordpress

Can this function be rewritten in a manner that does not involve returning undefined?

Using angular fire, I am fetching data from firestore based on the logged-in user. After ensuring that the user object has been retrieved, I have a command to monitor changes in the document. async fetchUserCards() { let _user: UserModel = await this.aut ...

angulartypescriptrxjs

How can I incorporate a new object into an existing object in ReactJS?

I am facing an issue where I have an object named waA that is required in the final step. However, in ReactJS, the new object is not updating the previous object using a switch statement in a function. Below is the code for the object: waA = { jso ...

javascriptreactjsobjectjsx

Implementing dynamic CSS in AngularJS using conditional statements

One technique I've been using in angularjs involves toggling between two windows using the ng-click and ng-show directives: <div ng-init="showTab2 = false"> <a ng-click="showTab2 = true; showTab1 = false ">#Tab1 </a> ...

javascriptcssangularjs

Guide to acquiring the webViewLink using Google Drive Api v3?

I'm having trouble locating the webViewLink. The documentation (https://developers.google.com/drive/api/v3/reference/files) states that I should receive this parameter when requesting gapi.client.drive.files.list(). However, I don't even have a c ...

javascriptvue.jsgoogle-drive-api

Encountering a consistent "npm start" error on all of my React projects on

Challenges with Starting React Project using npm Every time I try to run npm start in one of my React projects, I face the same error consistently: Expected Outcome: I expected the React application to start without any errors. Steps Taken: I have tri ...

reactjsnpmnpm-installnpm-start

Maximizing Angular Route Efficiency

Starting with this particular example, I am laying out my configuration like this: editor.module: .... import { editorRoutingModule } from './editor-routing.module'; import { RouteReuseStrategy } from '@angular/router'; import { myRout ...

angularangular-router

Python-based Electron application encounters a ZMQ.node error

I’m fairly new to working with node/npm/electron, but I’m currently trying to develop an electron application that interacts with a python module I created. I recently stumbled upon this GitHub repository and decided to clone it. However, when attempti ...

pythonnode.jsnpmelectrongyp

The specified type 'ListRenderItem<IPhotos>' cannot be assigned to type 'ListRenderItem<unknown>'

Can someone assist with resolving this error I'm encountering: Type 'ListRenderItem<IPhotos>' is not assignable to type 'ListRenderItem<unknown> Here is the code snippet: import { Dimensions, Image, ListRenderItem, Pressabl ...

typescriptreact-native

Removing the AM and PM from OwlDateTime in Angular is simple since the time format is already in 24-hour time

Using OwlDateTime in a 24-hour format: <div *ngIf="isSchedule" class="form-inline"> <label style='margin-right:5px ;margin-left:210px'> Date Time: <input [owlDateTimeTrigger]="dt" [owlDateTime]="dt" class="form-control" placeh ...

angulartypescript

Unable to locate module in the same folder using NPM on Windows while following the TodoMVC tutorial

PS C:\Users\Codey55\temp> npm run build > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3879c979c9e8590de959f868bb3c3ddc3ddc0">[email protected]</a> build C:\Users\Codey55\te ...

npmreactjstodomvc

Triggering a loop error may occur when attempting to update the state based on a

What I want to achieve is updating the state with the value received from a child component. However, whenever I try using the setstate method in my function, it results in a looping error. Here's a snippet of my code: class ParentTab extends Compone ...

javascriptreactjscomponentssetstate

Deduct a digit from a variable

My goal is to decrease the value of revlength each time the loop runs. For example, if there are 2 posts by 'A Google user', then subtract 2 from revlength. This is my attempted solution: var revlength = place.reviews.length; if (place.reviews[ ...

javascriptjqueryhtml

Merging scripts to minimize HTTP requests - The Takeover of the Body Swappers

For my website design, I've implemented the Invasion Of The Body Switchers script from brothercake.com. This script involves loading three separate js files in the header. I'm looking to optimize my site by reducing the number of HTTP requests a ...

javascript