将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文件，然后添加以下行：声明模块'jsencrypt';

然后，在我的comonents.ts文件中，通过以下行将其导入：import * as'JSencrypt from'jsencrypt';

我还尝试添加<脚本src =“ / node_modules / jsencrypt / bin / jsencrypt.js”> </ script>

到我的.html文件中。

在我的.component文件的初始化中，我尝试声明一个简单的JSEncrypt对象：var crypto = 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. ng new project_name
2. cd project_name
3. npm install-保存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);
    }
}

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

我不会详细介绍软件包使用情况本身，因为我不了解它，我认为这不是问题的重点。希望对您有所帮助！