将 Javascript 库 (jsencrypt) 导入 Angular 2 应用

Question

我已经浏览了围绕这个问题的所有教程，但未能找到解决方案。先说一些背景。我有一个 Angular 2 应用程序，我需要使用这个 JS 库进行加密：https://github.com/travist/jsencrypt

首先，我使用以下行安装了 jsencrypt 节点模块：npm install --save jsencrypt。这有效，并且可以在我的 node_modules 文件夹中找到 jsencrypt 模块。

一些教程告诉我创建一个 src/typings.d.ts 文件然后添加以下行： declare module 'jsencrypt';

然后，在我的 comonents.ts 文件中，我使用以下行导入它：从 'jsencrypt';

导入 * 作为 JSEncrypt

我也尝试添加

进入我的 .html 文件。

在我的 .component 文件的初始化中，我尝试声明一个简单的 JSEncrypt 对象： var decrypt = new JSEncrypt();

并且控制台显示此错误： TypeError：对象不是构造函数（评估 'new WEBPACK_IMPORTED_MODULE_4_jsencrypt()'）

所以我假设它不识别 jsencrypt 模块。

我只使用 Angular 工作了几天，所以我对 Angular 应用程序的结构组件的所有术语和基本理解都很陌生。任何帮助是极大的赞赏。

以本教程为起点： https://hackernoon.com/how-to-use-javascript-libraries-in-angular-2-apps-ff274ba601af

Answer 1

我对之前需要使用的任何其他 Javascript 模块使用了相同的步骤，并且一切正常。

ng 新 project_name
cd project_name
npm 安装 --save jsencrypt

正如您所提到的，此时您有一个完全可用的 Angular 应用程序，至少在 node_modules 中安装了 jsencrypt 包。接下来的步骤是摆脱 Typescript 编译消息，尽管您可以跳过它们并且它仍然有效：

在 src 文件夹中，创建一个名为 @types 的文件夹，然后在其中创建另一个包名称为 jsencrypt 的文件夹，最后创建一个 index.d.ts 在里面。这样：

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

文件的内容应该只是模块的声明：

declare module 'jsencrypt';

最后，为了使用这个包，在任何.ts文件中，例如我的app.component.ts文件，你可以导入模块并使用它:

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

您可以检查您的浏览器控制台，您有一个包含 module/package:

提供的所有属性和方法的对象

我不会详细介绍包的使用本身，因为我不知道它，而且我认为这不是问题的重点。希望对您有所帮助！

Answer 2

import { JSEncrypt } from 'jsencrypt';

试试这个。它只导入 JSEncrypt class.

Answer 3

在反应中（创建反应应用程序）用 .d.ts

打开这个文件

并添加这一行 declare module 'jsencrypt'; .

Answer 4

添加导入

import JSEncrypt from 'jsencrypt/bin/jsencrypt';

声明加密器

private encryptor: JSEncrypt;

设置public键

  private initEncryptor(): void {
    this.publicKey = this.storage.getItem('publicKey');

    if (this.publicKey) {
      this.encryptor = new JSEncrypt();
      this.encryptor.setPublicKey(this.publicKey);
    }
  }

将 Javascript 库 (jsencrypt) 导入 Angular 2 应用

Importing Javascript library (jsencrypt) into Angular 2 app

javascript

angular

typescript

import

jsencrypt