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 文件中，我使用以下行导入它： import * as JSEncrypt from 'jsencrypt';

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

进入我的 .html 文件。

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

并且控制台显示此错误：TypeError: Object is not a constructor (evalating 'new WEBPACK_IMPORTED_MODULE_4_jsencrypt ()')

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

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

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

标签： javascriptangulartypescriptimportjsencrypt

Answer 1

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

1. ng 新项目名称
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);
    }
}

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

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