Búsqueda de sitios web

Importando la biblioteca de Javascript (jsencrypt) en una aplicación Angular 2

He revisado todos los tutoriales relacionados con este problema y no he podido encontrar una solución. Primero un poco de contexto. Tengo una aplicación Angular 2 y necesito usar esta librería de JS para encriptación: https://github.com/travist/jsencrypt

Primero, instalé el módulo de nodo jsencrypt con la línea: npm install --save jsencrypt. Esto funcionó, y el módulo jsencrypt se pudo encontrar en mi carpeta node_modules.

Algunos tutoriales me dijeron que creara un archivo src/typings.d.ts y luego agregara la siguiente línea: declare module 'jsencrypt';

Luego, en mi archivo comonents.ts lo importo con esta línea: import * as JSEncrypt from 'jsencrypt';

También intenté agregar < script src="/node_modules/jsencrypt/bin/jsencrypt.js">< /script>

en mi archivo .html.

En el init de mi archivo .component, intento declarar un objeto simple JSEncrypt: var decrypt=new JSEncrypt();

Y la consola muestra este error: TypeError: Object no es un constructor (evaluando 'new WEBPACK_IMPORTED_MODULE_4_jsencrypt()')

Así que supongo que no reconoce el módulo jsencrypt.

Solo he estado trabajando con Angular durante un par de días, así que soy muy nuevo en toda la terminología y el entendimiento básico de los componentes estructurales de una aplicación Angular. Cualquier ayuda es muy apreciada.

Usé este tutorial como punto de partida: https://hackernoon.com/how-to-use-javascript-libraries-in-angular-2-apps-ff274ba601af

Respuesta #1

He usado los mismos pasos para cualquier otro módulo de Javascript que previamente necesitaba usar y todo funcionó.

  1. ng new project_name
  2. cd nombre_del_proyecto
  3. npm install --save jsencrypt

Como has mencionado, en este punto tienes una aplicación Angular completamente funcional, al menos con el paquete jsencrypt instalado en node_modules. Los siguientes pasos son deshacerse de los mensajes de compilación de Typescript, aunque puedes omitirlos y aún así funcionará:

Dentro de la carpeta src, crea una carpeta llamada @types y, dentro de ella, crea otra carpeta con el nombre del paquete, es decir, jsencrypt y, por último, crea un index.d.ts dentro de ella. De esta manera:

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

El contenido del archivo debe ser solo la declaración del módulo:

declare module 'jsencrypt';

Por último, para usar el paquete, en cualquier archivo .ts, por ejemplo en mi caso en el archivo app.component.ts, puedes importar el módulo y usarlo:

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

Puedes revisar la consola de tu navegador que tienes un objeto con todas las propiedades y métodos proporcionados por el módulo/paquete:

No entraré completamente en los detalles del uso del paquete en sí porque no estoy al tanto de ello y creo que no es el punto de la pregunta. ¡Espero que ayude!

Respuesta #2

en React (crear aplicación React) abre este archivo con .d.ts

y añade esta línea declare module 'jsencrypt';.

Artículos relacionados