Can't import external NPM package to make angular library

Question

package.json firstly I did this,

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

Have you tried to do what the TypeScript compiler suggested? — tromgy
– tromgy, Commented Oct 30, 2021 at 13:08

Amaan Md. · Accepted Answer · 2022-08-10 05:48:52Z

2

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/

edited Aug 10, 2022 at 5:48

answered Aug 10, 2022 at 5:45

Amaan Md.

213 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mahdi Zarei · Accepted Answer · 2021-10-30 13:47:35Z

1

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');

answered Oct 30, 2021 at 13:47

Mahdi Zarei

7,7538 gold badges36 silver badges67 bronze badges

Collectives™ on Stack Overflow

Can't import external NPM package to make angular library

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related