Question

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

首先，我用以下代码行安装了jsencrypt节点模块：npm install --save jsencrypt。这行得通，可以在我的node_modules文件夹中找到jsencrypt模块。

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

然后，在我的comonents.ts文件中，使用以下行将其导入：从'jsencrypt'导入*作为JSEncrypt;

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

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

ng新的项目名称
cd project_name
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);
    }
}

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

由于我不了解软件包使用情况的详细信息，因此我将不做详细介绍，我认为这不是问题的重点。希望对您有所帮助！

Answer 2

import { JSEncrypt } from 'jsencrypt';

尝试一下。它仅导入JSEncrypt类。

Answer 3

在react（创建react应用）中使用.d.ts

打开此文件

并添加此行declare module 'jsencrypt'; 。

将Javascript库（jsencrypt）导入Angular 2应用

3 个答案: