CODEWITHSUNDEEP
javascriptangulartypescriptnpmtypeerror
Sefat Anam
Sefat Anam

Reputation: 162

Can't import external NPM package to make angular library

{
  "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"
  }
}

Secondly, I did this


{
  "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"
  }
}

But in my service file when I import secure-web-storage Like this

import * as SecureStorage from 'secure-web-storage'; I got this kinda 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';`

secure-web-storage does not contain any @types/secure-web-storage file. So How could I get rid from this error ? I did not get any clear answer after googling so much.

My folder structure might be help you,

My Folder Structure Image

Upvotes: 2

Views: 1309

Answers (2)

Amaan Md.
Amaan Md.

Reputation: 21

You can also try to create a typings.d.ts file inside the src folder and manually add typings for it.

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

And then in your ts file, you can use something like -

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

By using this method you can save a lot on bundle size instead of using -

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

which takes a lot of bundle size and makes the application slower. You can read more about this here - https://web.dev/commonjs-larger-bundles/

Upvotes: 2

Mahdi Zarei
Mahdi Zarei

Reputation: 7396

If running npm install -D @types/secure-web-storage didn't solve the problem use require instead of import.

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

Upvotes: 1

Related Questions