Importing Angular libraries with the * symbol

One of the key modules in my library is sha256. To import it, I had to use the following syntax:

import sha256 from 'sha256';

However, while researching this issue, I came across a question on Stack Overflow titled: Errors when using MomentJS in Angular Typescript library

The suggestion was that I needed to handle the import differently during compilation:

I initially changed my import statement to:

import * as sha256_ from 'sha256';
const sha256 = sha256_;

Unfortunately, this also resulted in the same error message:

ERROR: Cannot call a namespace ('sha256')
An unhandled exception occurred: Cannot call a namespace ('sha256')

Next, I attempted to modify my tsconfig.json:

  "angularCompilerOptions": {
    "allowSyntheticDefaultImports": true,
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }

Despite making these adjustments, I still encountered issues.

Could someone guide me on how to correctly manage this particular import in my library?

Edit

In addition, I included it in the compilerOptions:

    "compilerOptions": {
    "outDir": "../../out-tsc/lib",
    "target": "es2015",
    "declaration": true,
    "inlineSources": true,
    "allowSyntheticDefaultImports": true,
    "types": [],
    "lib": [
      "dom",
      "es2018"
    ]
  },

ng --version

Angular CLI: 8.3.20
Node: 10.16.0
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.803.20
@angular-devkit/build-angular      0.803.20
@angular-devkit/build-ng-packagr   0.803.20
@angular-devkit/build-optimizer    0.803.20
@angular-devkit/build-webpack      0.803.20
@angular-devkit/core               8.3.20
@angular-devkit/schematics         8.3.20
@angular/cli                       8.3.20
@ngtools/webpack                   8.3.20
@schematics/angular                8.3.20
@schematics/update                 0.803.20
ng-packagr                         5.7.1
rxjs                               6.4.0
typescript                         3.5.3
webpack                            4.39.2

Answer №1

Give this a shot...

npm install --save @types/sha256

after that

import sha256 from 'sha256';

or

import * as sha256_ from 'sha256';

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

Choosing the most suitable stylesheet in Angular 8 when multiple CSS files are present

In my project, I have several CSS stylesheets for angular components. I am curious if there is a method to designate a preferred stylesheet when multiple sheets loaded by a component contain the same styles but with different values. ...

Utilizing Nested Click Events in jQuery to Enhance User Interaction

I'm really struggling with this and can't seem to find a solution anywhere. I want to capture data when button A is clicked, and then submit that data via AJAX when button B is clicked. Here's what I've been considering: $(document).o ...

Activating events with Jquery

Can anyone help me with this HTML and jQuery issue I'm facing? When I click on an image for the first time (when it has the class 'hide'), the first jQuery click function is executed. However, when I click on the image again, the second func ...

Ways to mimic an object and confirm that a specific parameter was passed to the mimic

I am currently experimenting with testing an HttpInterceptor, using ng-mocks: @Injectable() export class AuthTokenInterceptor implements HttpInterceptor { constructor(private store: Store) {} intercept(req: HttpRequest<any>, ...

Limit the input to numbers when pasting into Angular

Implementing a directive in <input type='text'> to restrict user input to numbers has been successful! The issue arises when a user copies and pastes a string, causing Angular to accept the value and send it to the backend. angular.module ...

Querying Firebase by the value of a child node

Here is how my structure looks like: 2017511 UcQefEaHJG6fteGsbsiaWjQ60d9Q62 value1: 50 value2: 1200 value3: "blabla" AcQefEaHJG6fteGsbsiaWjQ60d9Q62 value1: 55 value2: 2200 value3: "balabla" BcQefEaHJG6fteGsbsiaWjQ6 ...

Display hyperlinks upon hovering over text

In the sign-up form, there are options for two different types of users: teachers and students. When the sign-up option is selected, a drop-down menu with choices for teacher and student will appear. However, I would like it to function more like other w ...

How to Generate a Unique URL in Angular 7 Using Typescript

I'm struggling to display or download a .pdf file in my Angular 7 project due to issues with window.URL.createObjectURL. Here's the code snippet I've written: this.userService.getFile(report.id).subscribe( res => { console.log(res) ...

Sharing data between React JS components Passing information between different components in React JS

My NavBar.js component contains login information for the logged-in user. It displays "Welcome" along with the user details when the user is logged in. Now, I want to replicate this functionality in the ProductList.js component so that when a user posts a ...

Receiving an error while trying to install packages from the NPM registry due to non

I am facing some challenges while attempting to install my Ionic App through the registry along with its dependencies. I have been using npm i --loglevel verbose command, and my ~/.npmrc file is configured as follows: //nexus.OMMITED.com/repository/:_auth ...

Django and its compatibility with modal windows

I have developed a Django website that includes multiple items in a "for" loop. I need to delete a specific item by opening a modal window and passing the post ID (referred to as "get_post_id") to the modal window. However, I want the modal window to exist ...

Attempting to execute a function within a MAP operation

My attempt to integrate a function into my map is resulting in only the function running and not the rest of the code. Edit: After reflecting on the situation, it dawned on me that I need to elaborate further. The goal here is to execute this.math in orde ...

Looking for a JavaScript function that will enable the acceptance of commas and spaces

How can I modify this integer validation function to allow for commas and spaces to be entered during the keydown event? function intValidate(event) { if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || even ...

What causes the toggle effect in my jQuery onclick function to alternate between on and off when the initialization is repeated multiple times?

I am facing an issue with my website where icons/buttons trigger a menu when clicked. I need to load more data by adding more buttons, so I tried re-initializing the existing buttons using a jQuery onclick function whenever the number of buttons changes. ...

Leveraging .tsx components within nested .tsx components in React Native

Currently, I am delving into the world of building apps using TypeScript in React Native. Coming from a background as a Swift developer, adjusting to JavaScript and TypeScript has been an interesting journey. An observation that stood out to me is the cha ...

The absence of AudioPlayer may be responsible for the compilation failure on Vercel

Here is the latest code snippet import { useState, useEffect, useRef } from "react"; import { FaPlay, FaPause, FaForward, FaBackward } from "react-icons/fa"; export default function Player() { const [isPlaying, setIsPlaying] = useState(false); const [ ...

What is the reason behind Node's error callback returning undefined first?

Whenever I try to run the error callback function, the code below returns undefined. I'm puzzled by why the JSON isn't being returned when the console log displays the entire query. Take a look at the function that is triggering the json to be l ...

Maintaining a reference to an element while binding event handlers in a prototype

Is there a way to utilize a bound event handler in prototype while maintaining the "this" context? It seems that doing so disrupts the default binding provided by prototype for event handlers. According to the documentation: The handler's context ...

Steps for incorporating 'admin-ajax.php' on the frontend

Here is the code for Javascript. Javascript used: new AjaxUpload('#upload_btn', { action: '<?php echo admin_url("admin-ajax.php"); ?>', This function only functions when the user is logged in. ...

Guide on crafting a scrollable and touch-responsive grid using CSS and JavaScript

I am seeking guidance on creating a grid with a variable number of columns and rows. It should be contained within a separate div and should not interfere with other objects or alter the parent's size. The grid needs to be square and I am currently u ...