Importere Javascript-bibliotek (jsencrypt) i Angular 2-app

Jeg har gått gjennom alle veiledningene som omhandler dette problemet, og har ikke vært i stand til å finne en løsning. Litt bakgrunn først. Jeg har en Angular 2-app og jeg trenger å bruke dette JS-biblioteket for kryptering: https://github.com/travist/jsencrypt

Først installerte jeg jsencrypt-node-modulen med linjen: npm install --save jsencrypt. Dette virket, og jsencrypt-modulen kunne finnes i min node_modules-mappe.

Noen opplæringsprogrammer fortalte meg å opprette en src/typings.d.ts-fil og deretter legge inn følgende linje: declare module 'jsencrypt';

Så, i min comonents.ts-fil importerer jeg det med denne linjen: import * as JSEncrypt fra 'jsencrypt';

Jeg prøvde også å legge til < script src="/node_modules/jsencrypt/bin/jsencrypt.js">< /script>

inn i min .html-fil.

I init-funksjonen i .component-filen min prøver jeg å deklarere et enkelt JSEncrypt-objekt: var decrypt=new JSEncrypt();

Og konsollen viser denne feilen: TypeError: Objekt er ikke en konstruktør (vurderer 'new WEBPACK_IMPORTED_MODULE_4_jsencrypt()')

Så jeg antar at den ikke gjenkjenner jsencrypt-modulen.

Jeg har kun jobbet med Angular i et par dager, så jeg er veldig ny innen all terminologi og grunnleggende forståelse av strukturelle komponenter i en Angular-applikasjon. All hjelp er svært verdsatt.

Brukte denne veiledningen som et utgangspunkt: https://hackernoon.com/how-to-use-javascript-libraries-in-angular-2-apps-ff274ba601af

Svar #1

Jeg har brukt de samme trinnene for ethvert annet Javascript-modul som jeg tidligere trengte å bruke, og alt fungerte.

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

Som du har nevnt, på dette tidspunktet har du en fullt fungerende Angular-applikasjon, i det minste med pakken jsencrypt installert i node_modules. Neste steg er å bli kvitt Typescript-kompileringsmeldingene, selv om du kan hoppe over dem, og det vil fortsatt fungere:

Inne i src-mappen, opprett en mappe som heter @types og, inni den, opprett en annen mappe med pakkenavnet, for eksempel jsencrypt, og til slutt opprett en index.d.ts inne i den. På denne måten:

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

Innholdet i filen skal bare være deklarasjonen av modulen:

declare module 'jsencrypt';

Til slutt, for å bruke pakken, i hvilken som helst .ts-fil, for eksempel i mitt tilfelle app.component.ts-filen, kan du importere modulen og bruke den:

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

Du kan sjekke nettleserens konsoll for å se at du har et objekt med alle egenskaper og metoder som tilbys av modulen/pakken:

Jeg vil ikke gå helt inn på detaljene om bruk av pakken selv fordi jeg ikke er kjent med det, og jeg tror ikke det er poenget med spørsmålet. Jeg håper det hjelper!

Svar #2

i React (create react app) åpne denne filen med .d.ts

og legg til denne linjen declare module 'jsencrypt';.

Relaterte artikler