Importing Javascript library (jsencrypt) into Angular 2 app

Question

I have looked through all the tutorials revolving around this issue, and havn't been able to find a solution. Some background first. I have a Angular 2 app and I need to use this JS library for encryption: https://github.com/travist/jsencrypt

First, I installed the jsencrypt node module with the line: npm install --save jsencrypt. This worked, and the jsencrypt module could be found in my node_modules folder.

Some tutorials told me to create a src/typings.d.ts file then add in the following line: declare module 'jsencrypt';

Then, in my comonents.ts file I import it with this line: import * as JSEncrypt from 'jsencrypt';

I also tried adding < script src="/node_modules/jsencrypt/bin/jsencrypt.js">< /script>

into my .html file.

In the init of my .component file, I try declaring a simple JSEncrypt object: var decrypt = new JSEncrypt();

And the console displays this error: TypeError: Object is not a constructor (evaluating 'new WEBPACK_IMPORTED_MODULE_4_jsencrypt()')

So I'm assuming it does not recognize the jsencrypt module.

I have only been working with Angular for a couple of days, so I'm very new to all the terminology and basic understanding of the structural components of an Angular application. Any help is greatly appreciated.

Used this tutorial as a starting point: https://hackernoon.com/how-to-use-javascript-libraries-in-angular-2-apps-ff274ba601af

Answer 1

I have used the same steps for any other Javascript module that I previously needed to use and everything worked.

1. ng new project_name
2. cd project_name
3. npm install --save jsencrypt

As you have mentioned, at this point you have a fully working Angular application, at least with the package jsencrypt installed in node_modules. The next steps are to get rid of the Typescript compilation messages although you can skip them and it will still work:

Inside the src folder, create a folder named @types and, inside of it, create another folder with the package name i.e. jsencrypt and, lastly, create an index.d.ts inside of it. This way:

• application_root_folder/src/@types/jsencrypt/index.d.ts

The content of the file should be just the declaration of the module:

declare module 'jsencrypt';

Lastly, in order to use the package, in any .ts file, for example in my case app.component.ts file, you can import the module and use it:

import { Component } from '@angular/core';
import * as JsEncryptModule from 'jsencrypt';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app';

    constructor() {
        var encrypt = new JsEncryptModule.JSEncrypt();
        console.log(encrypt);
    }
}

You can check your browser's console that you have an object with all properties and methods provided by the module/package:

I won't go fully in the details of the package usage itself because I'm not aware of it and I think it is not the point of the question. I hope it helps!