javascript - 将 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；

我还尝试添加 < script src="/node_modules/jsencrypt/bin/jsencrypt.js"> </script>

进入我的 .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 模块使用了相同的步骤，并且一切正常。

1. 新项目名称
2. cd 项目名称
3. npm install --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);
    }
}

您可以检查浏览器的控制台，您有一个对象，其中包含模块/包提供的所有属性和方法:

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