Tengo una pregunta básica sobre la configuración del paquete web 5 ya que no tengo experiencia con él. Me gustaría crear la aplicación Angular más simple que use el módulo crypto-js de node.js y SHA256 .
Antes de webpack 5 era bastante simple. No tenía que preocuparse por el paquete web, estaba en algún lugar atrás.
En el símbolo del sistema, hice: ng new TestApp -> cd TestApp -> npm install crypto-js -> npm install --save @types/crypto-js -> escribir código de prueba simple con SHA256 importado -> construirlo y -> it ¡trabajó!
Ahora me sale mensaje:
CAMBIO IMPORTANTE: webpack < 5 solía incluir polyfills para los módulos principales de node.js de forma predeterminada. Este ya no es el caso. Verifique si necesita este módulo y configure un polyfill para él.
Si desea incluir un polyfill, debe: - agregar un respaldo 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }' - instalar 'crypto-browserify' Si no lo hace desea incluir un polyfill, puede usar un módulo vacío como este: resolve.fallback: { "crypto": false }
Tengo que instalar este módulo e incluir este polyfill dentro del archivo de configuración. La pregunta es cómo escribir webpack.config.js más simple, dónde colocarlo y qué incluir además de estas líneas.
BR
Tuve el mismo problema, esta es la solución de trabajo que encontré en git hub. https://github.com/ChainSafe/web3.js/issues/4070
ejecutar en el directorio de su proyecto:
npm install crypto-browserify stream-browserify assert stream-http https-browserify os-browserifytsconfig.json Agregue esto en: "compilerOptions": { [...] }
"paths" : { "crypto": ["./node_modules/crypto-browserify"], "stream": ["./node_modules/stream-browserify"], "assert": ["./node_modules/assert"], "http": ["./node_modules/stream-http"], "https": ["./node_modules/https-browserify"], "os": ["./node_modules/os-browserify"], }Me encontré con este problema después de actualizar a Angular 12, así que después de buscar terminé haciendo lo siguiente:
En tsconfig.json agregué:
{ "compilerOptions": { "paths":{ "crypto":["node_modules/crypto-js"] } } }Y en angular.json agregué:
{ "architect": { "build": { "options": { "allowedCommonJsDependencies": ["crypto"], } } } }Y las advertencias se han ido. Espero que esto lo pueda ayudar.
Lamentablemente, la configuración del paquete web está oculta por Angular que solo le da acceso a algunas opciones expuestas por AngularCli.
Sin embargo, puede usar el paquete @angular-builders/custom-webpack que funciona muy bien. Es fácil de usar y puede sustituir algunas opciones de paquetes web sin romper toda la configuración proporcionada por Angular.
Entonces, en su caso, podría agregar un navegador criptográfico como respaldo para "cripto". En ese caso, el archivo de configuración adicional de su paquete web se vería así:
{ resolver: { alternativa: { crypto: "./node_modules/crypto-browserify" } } }
Los siguientes pasos ayudarán a resolver este problema.
Instale los puertos browserify para crypto y stream
npm install crypto-browserify stream-browserify En tsconfig.json , en las opciones del compilador, agregue las siguientes líneas. Dado que webpack no exporta automáticamente los polyfills, estos especifican un conjunto de entradas que reasignan las importaciones a ubicaciones de búsqueda adicionales.
"paths":{ "crypto":["node_modules/crypto-browserify"], "stream":["node_modules/stream-browserify"] } En angular.json , en architect->build->options agregue la línea a continuación que dice que los paquetes crypto de CommonJS deben usarse sin una advertencia de tiempo de compilación.
"allowedCommonJsDependencies": ["crypto"]Nota : Lea lo que hace browserify .
Además de la respuesta de @Nicolas, también tuve un problema: 'Global no está definido'.
Para resolver eso, tuve que agregar esas líneas a 'polyfills.ts':
(window as any).global = window; (window as any).process = { env: {DEBUG: undefined}, };