Adding Crypto-JS to an Angular 2 application

For my Angular 2 development using TypeScript and SystemJS, I needed to integrate crypto-js. Here is the configuration in my systemjs.config.js file:

(function (global) {
  System.config({
    paths: {
      'npm:': 'node_modules/'
    },
    map: {
      app: 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'crypto-js':                 'npm:crypto-js/core.js',
      'crypto-js/sha256':          'npm:crypto-js/sha256.js',
    },

    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      'crypto-js': {
        defaultExtension: 'js'
      }
    }
  });
})(this);

In my service.ts file, I have included:

import 'crypto-js/sha256';

However, upon running the app, I encounter this error message:

http://localhost:3000/node_modules/crypto-js/core as "./core" from http://localhost:3000/node_modules/crypto-js/sha256.js

Any suggestions on how to resolve this issue?

Answer №1

After a bit of investigation, it became clear that the solution was simply to include defaultJSExtensions: 'js' in the code snippet below:

packages: {
        '.': {
            defaultJSExtensions: 'js'
        },
        app: {
            main: './main.js'
        }
    }

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

Issue with dependency injection in Angular 16 when used as a standalone feature

Here are my standalone API calls within the service: import { Injectable} from '@angular/core'; import { ProductEndPoints } from '../../constants/apiConstants/product-endpoints'; import { HttpClient} from '@angular/common/http&ap ...

Is there a way to obtain the coordinates of an SVG element by simply clicking on a specific point?

I'm still learning about SVG and I'm trying to trigger an event that captures the click coordinates when clicking on the SVG. I have a few questions: Since I'm using Angular, I'm unsure if it's possible to keep my function in th ...

Flow - secure actions to ensure type safety

Currently implementing flow and looking to enhance the type safety of my reducers. I stumbled upon a helpful comment proposing a solution that seems compatible with my existing codebase: https://github.com/reduxjs/redux/issues/992#issuecomment-191152574 I ...

Can you please tell me the location of the sqlite database file in Ionic 2 Cordova?

Currently, I am working with cordova-plugin-sqlite within the context of angular2 ionic2. Interestingly, despite my efforts, I have not been able to locate the database file anywhere within my project structure. Numerous attempts to resolve this issue by ...

I am facing difficulties in retrieving data from MongoDB using Angular 8

Having trouble loading data from MongoDB using Angular 8? I've successfully loaded data with https://jsonplaceholder.typicode.com/, but when trying locally at 'http://localhost:3000/employees', it doesn't work. I can post data but una ...

The argument labeled as 'shop' does not fit the criteria for the parameter 'items' or 'cart'

I've been doing some research but haven't had any luck finding a solution. I'm fairly new to Angular and currently working on a webstore project. I followed a tutorial, but encountered an error along the way. import { select, Store } from & ...

Creating a dropdown menu in Ionic 2 with dynamically populated options and a pre-selected value using ng

After scouring the depths of the internet, I have yet to find a suitable solution to my current dilemma. The code I have generates a list of options dynamically from an API and is functioning perfectly. <ion-select formControlName="d ...

The user model cannot be assigned to the parameter of type Document or null in a mongoose with Typescript environment

While working with Typescript, I encountered an error related to mongoose. The issue arises from the fact that mongoose expects a promise of a mongoose document (in this case, the user's document) or "null" to be resolved during a search operation. Ho ...

The combination of Object.keys() and the find function

Having trouble figuring out why I'm getting an error when attempting to use ES6 .find on the following data in order to retrieve the record with id number 3. { {id:10,title:'Dairy & Eggs'} {id:7,title:'Laundry & Household'} {id ...

The drawback of using a datepicker within an Angular input field

When attempting to open the Angular Material datepicker, it was appearing above the input field. How can I make it open below the input field instead? <mat-form-field appearance="outline" class="w-100 date-class"> < ...

When inputting data from an Angular 6 form into Mongoose, the stored date appears to be offset by

I am currently working with Angular 6 to store form data, specifically a date. The form is sending the date as (date: "2018-07-02T00:00:00.000Z") and that's what gets saved into mongoose. However, when I retrieve all events to display on the page, the ...

Challenges with Angular 4 service initialization

Having trouble with my authentication service. The constructor is being called 259 times when making an HTTP request, but only once when the call is removed. I am using a shared module to provide a unique instance of the service. Angular version: 4.4.4 C ...

Error message: "Declared app-routing module in Angular 2 is encountering routing declaration

Currently, I am immersing myself in learning Angular 2 through the official tutorial available at https://angular.io/docs/ts/latest/tutorial/toh-pt5.html. However, I have encountered an issue related to routing. The error message displayed states: Type Das ...

In Angular and Typescript, adjusting the index in one dropdown will automatically update the selected option in another dropdown

I'm a newcomer to Angular and I could use some assistance with the following requirement: In my Angular template, I have two dropdowns. I want the selection in one dropdown to automatically reflect in the other dropdown. Both dropdowns pull their val ...

I am encountering compilation errors while trying to run a basic react-dnd list using typescript

I'm currently working on implementing the beautiful-react-dnd example and encountering some errors: import * as React from 'react'; import { DragDropContext, Draggable, Droppable, DroppableProvided, DraggableLocation, DropResult, ...

Tips for incorporating the ternary operator in JSX of a React component while utilizing TypeScript?

I am looking to implement a conditional rendering logic in React and TypeScript, where I need to return null if a specific condition is met, otherwise render a component using a ternary operator. Here is the code snippet I currently have: {condition1 && ...

Swapping Out Imports with Window Objects in TypeScript

After creating a TypeScript module that relies on a third-party library, the JavaScript output from compilation includes a statement using require: "use strict"; var dexie_1 = require("dexie"); var storage; (function (storage) { ... })(storage || (stora ...

Using formArray to dynamically populate data in Angular

I am attempting to showcase the values from a formarray that were previously added. component.ts this.companyForm = this.fb.group({ id: [], company_details: this.fb.group({ ---- }), company_ip_addresses: this.fb.array([this.fb.group({ ...

Tips for extracting information from a TypeScript JSON document

Hey there, I'm currently having trouble understanding how to retrieve data from a JSON file. environment.ts: export const environment = { production: false, urlListBooks: "/assets/list-books.json", urlGetBooks: "/assets/edit- ...

TypeScript: Defining a custom object type using an array of objects

Is there a way to dynamically generate an object based on the name values in an array of objects? interface TypeA { name: string; value: number; } interface TypeB { [key: string]: { value: any }; } // How can we create an OutputType without hard ...