typescript - Att använda object-hash i ett Angular 8-projekt orsakar felet "Cannot read property 'crypto' of undefined"

Jag har ett Angular-CLI-projekt som använder biblioteket object-hash för att skapa hashar från objekt. Normalt skulle jag bara lägga

import * as objectHash from 'object-hash'

överst i en av mina komponentfiler och sedan göra const hash=objectHash(obj) var som helst jag behövde en hash.

Jag uppgraderade precis mitt projekt till Angular 8 och plötsligt fungerar Angular-projektet serves utmärkt, men när jag kör en produktionsbuild får jag ett fel: Cannot read property 'crypto' of undefined.

Detta beror på att Angular 8 genererar differential JavaScript, vilket skapar vissa paket för nyare webbläsare som <script type="module"> och för äldre webbläsare som <script nomodule>. När ett skript har type="module" behandlas tydligen this annorlunda - så object-hash-bibliotekets referens till this bryts: https://github.com/puleos/object-hash/issues/71

Har någon någon insikt i hur jag kan lösa detta?

Potentiella lösningar jag ser är:

  • Att importera object-hash-biblioteket på ett annat sätt på något sätt

  • Att använda ett helt annat webbläsarkompatibelt objekt-hashningsbibliotek (jag har inte hittat ett ännu)

  • Få Angular-CLI v8 att sluta generera differential JS och bara skriva ut gammaldags bundlar (jag har inte hittat en lösning på detta än)
  • Nedgradera till Angular 7

Svar #1

Efter commit 1e0835c bör uppgradering av object-hash till v2.0.1 lösa problemet (se författarens kommentar i det rapporterade problemet)

Svar #2

Jag tycker att det enklaste sättet är att använda anpassad webpack-konfiguration som i det ärendet du nämnde, eftersom det är ett problem under byggfasen, inte i körning. Som jag kan se kommer kärnmedlemmar i Angular inte att fixa detta problem snart.

Du kommer att få alla funktioner från angular/cli-byggnaden (eftersom @angular-builders/custom-webpack är baserad på standard Angular-byggaren), men du kommer att kunna skriva dina egna webpack-regler. Enligt min åsikt är det en mycket säker ytterligare konfiguration:

module.exports = {
  node: {
    path: true,
    crypto: true,
    fs: 'empty'
  }
}

och jag tror att du aldrig kommer att förstöra något med @angular-uppgraderingar. Till exempel på mitt arbetsprojekt använder vi @angular-builders/custom-webpack på ett mer aggressivt sätt: vi byter ut vissa plugins och loaders och använder våra egna. Och ibland kraschar det bara.

Relaterade artiklar