Draft fix ionic public key

[sultanmyrza]

Just a draft PR

┆Issue is synchronized with this Asana task by Unito

[sultanmyrza]

Bofore WIP: fix ionic build errors 1

ionic build command throw the following error

click to see error details

ore.service.ts depends on 'compressorjs'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/sultanmyrza/Clients/numbersprotocol/capture-lite/src/app/shared/repositories/proof/proof.ts depends on 'lodash'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/sultanmyrza/Clients/numbersprotocol/capture-lite/src/app/utils/crypto/crypto.ts depends on 'web3'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/sultanmyrza/Clients/numbersprotocol/capture-lite/src/app/utils/nit/nit.ts depends on '@numbersprotocol/nit'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

./node_modules/@numbersprotocol/estuary-upload/dist/browser/estuary-upload.js:12:82-95 - Error: Module not found: Error: Can't resolve 'fs' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/@numbersprotocol/estuary-upload/dist/browser'

./node_modules/@numbersprotocol/estuary-upload/dist/browser/estuary-upload.js:12:169-184 - Error: Module not found: Error: Can't resolve 'path' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/@numbersprotocol/estuary-upload/dist/browser'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }' - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }

./node_modules/@numbersprotocol/estuary-upload/dist/browser/estuary-upload.js:12:256-270 - Error: Module not found: Error: Can't resolve 'tty' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/@numbersprotocol/estuary-upload/dist/browser'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "tty": require.resolve("tty-browserify") }' - install 'tty-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "tty": false }

./node_modules/@numbersprotocol/estuary-upload/dist/browser/estuary-upload.js:12:272-287 - Error: Module not found: Error: Can't resolve 'zlib' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/@numbersprotocol/estuary-upload/dist/browser'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }' - install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "zlib": false }

./node_modules/@numbersprotocol/nit/node_modules/decompress-response/index.js:8:13-28 - Error: Module not found: Error: Can't resolve 'zlib' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/@numbersprotocol/nit/node_modules/decompress-response'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }' - install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "zlib": false }

./node_modules/@numbersprotocol/nit/node_modules/got/dist/source/core/index.js:14:13-26 - Error: Module not found: Error: Can't resolve 'fs' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/@numbersprotocol/nit/node_modules/got/dist/source/core'

./node_modules/@numbersprotocol/nit/node_modules/got/dist/source/core/utils/get-body-size.js:9:13-26 - Error: Module not found: Error: Can't resolve 'fs' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/@numbersprotocol/nit/node_modules/got/dist/source/core/utils'

./node_modules/@numbersprotocol/nit/node_modules/got/dist/source/core/utils/timed-out.js:8:12-26 - Error: Module not found: Error: Can't resolve 'net' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/@numbersprotocol/nit/node_modules/got/dist/source/core/utils'

./node_modules/cacheable-lookup/source/index.js:13:4-18 - Error: Module not found: Error: Can't resolve 'dns' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/cacheable-lookup/source'

./node_modules/http2-wrapper/source/agent.js:5:12-26 - Error: Module not found: Error: Can't resolve 'tls' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/http2-wrapper/source'

./node_modules/http2-wrapper/source/agent.js:7:14-30 - Error: Module not found: Error: Can't resolve 'http2' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/http2-wrapper/source'

./node_modules/http2-wrapper/source/client-request.js:5:14-30 - Error: Module not found: Error: Can't resolve 'http2' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/http2-wrapper/source'

./node_modules/http2-wrapper/source/index.js:3:14-30 - Error: Module not found: Error: Can't resolve 'http2' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/http2-wrapper/source'

./node_modules/http2-wrapper/source/utils/calculate-server-name.js:3:12-26 - Error: Module not found: Error: Can't resolve 'net' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/http2-wrapper/source/utils'

./node_modules/resolve-alpn/index.js:5:12-26 - Error: Module not found: Error: Can't resolve 'tls' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/resolve-alpn'

───────────────────────────────────────────────

   Ionic CLI update available: 7.0.1 → 7.1.5
       Run npm i -g @ionic/cli to update

───────────────────────────────────────────────

[ERROR] An error occurred while running subprocess ng.

      ng run app:build exited with exit code 1.

      Re-running this command with the --verbose flag may provide more information.

sultanmyrza@MacBook-Pro-SK capture-lite %

- History restored

sultanmyrza@MacBook-Pro-SK capture-lite %

After WIP: fix ionic build errors 1

If I run ionic build it throws the following error

click to see error details

- @ngx-formly/material/form-field [es2015/esm2015] (git+https://github.com/ngx-formly/ngx-formly.git)
- @ngx-formly/core/select [es2015/esm2015] (git+https://github.com/ngx-formly/ngx-formly.git)
- @pqina/angular-pintura [es2015/esm2015] ()
- @ngx-formly/material/input [es2015/esm2015] (git+https://github.com/ngx-formly/ngx-formly.git)
- @ngx-formly/material/textarea [es2015/esm2015] (git+https://github.com/ngx-formly/ngx-formly.git)
- @ngx-formly/material/radio [es2015/esm2015] (git+https://github.com/ngx-formly/ngx-formly.git)
- @ngx-formly/material/checkbox [es2015/esm2015] (git+https://github.com/ngx-formly/ngx-formly.git)
- @ngx-formly/material/multicheckbox [es2015/esm2015] (git+https://github.com/ngx-formly/ngx-formly.git)
- @ngx-formly/material/select [es2015/esm2015] (git+https://github.com/ngx-formly/ngx-formly.git)
- ng-circle-progress [es2015/esm2015] (https://github.com/bootsoon/ng-circle-progress)
- ngx-pinch-zoom [es2015/esm2015] (git+https://github.com/drozhzhin-n-e/ngx-pinch-zoom.git)
- @ngx-formly/material [es2015/esm2015] (git+https://github.com/ngx-formly/ngx-formly.git)
- @techiediaries/ngx-qrcode [es2015/esm2015] (https://github.com/techiediaries/ngx-qrcode)
Encourage the library authors to publish an Ivy distribution.
✔ Browser application bundle generation complete.

./node_modules/@numbersprotocol/estuary-upload/dist/browser/estuary-upload.js:5683:23-44 - Warning: Module not found: Error: Can't resolve 'stream/web' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/@numbersprotocol/estuary-upload/dist/browser'

./node_modules/@numbersprotocol/nit/node_modules/keyv/src/index.js:32:16-42 - Warning: Critical dependency: the request of a dependency is an expression

./src/app/features/home/capture-tab/capture-tab.component.scss?ngResource - Warning: Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning

(14:3) autoprefixer: start value has mixed support, consider using flex-start instead

Warning: /Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/@ethersproject/bignumber/lib.esm/bignumber.js depends on 'bn.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/@ethersproject/json-wallets/lib.esm/keystore.js depends on 'aes-js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/@ethersproject/keccak256/lib.esm/index.js depends on 'js-sha3'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/@ethersproject/providers/lib.esm/base-provider.js depends on 'bech32'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/@ethersproject/sha2/lib.esm/sha2.js depends on 'hash.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/@ngneat/transloco/**ivy_ngcc**/fesm2015/ngneat-transloco.js depends on 'flat'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/@techiediaries/ngx-qrcode/**ivy_ngcc**/fesm2015/techiediaries-ngx-qrcode.js depends on 'qrcode'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/sultanmyrza/Clients/numbersprotocol/capture-lite/src/app/shared/media/media-store/media-store.service.ts depends on 'compressorjs'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/sultanmyrza/Clients/numbersprotocol/capture-lite/src/app/shared/repositories/proof/proof.ts depends on 'lodash'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/sultanmyrza/Clients/numbersprotocol/capture-lite/src/app/utils/crypto/crypto.ts depends on 'web3'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/sultanmyrza/Clients/numbersprotocol/capture-lite/src/app/utils/nit/nit.ts depends on '@numbersprotocol/nit'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

./node_modules/@numbersprotocol/estuary-upload/dist/browser/estuary-upload.js:12:82-95 - Error: Module not found: Error: Can't resolve 'fs' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/@numbersprotocol/estuary-upload/dist/browser'

./node_modules/@numbersprotocol/nit/node_modules/got/dist/source/core/index.js:14:13-26 - Error: Module not found: Error: Can't resolve 'fs' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/@numbersprotocol/nit/node_modules/got/dist/source/core'

./node_modules/@numbersprotocol/nit/node_modules/got/dist/source/core/utils/get-body-size.js:9:13-26 - Error: Module not found: Error: Can't resolve 'fs' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/@numbersprotocol/nit/node_modules/got/dist/source/core/utils'

./node_modules/@numbersprotocol/nit/node_modules/got/dist/source/core/utils/timed-out.js:8:12-26 - Error: Module not found: Error: Can't resolve 'net' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/@numbersprotocol/nit/node_modules/got/dist/source/core/utils'

./node_modules/cacheable-lookup/source/index.js:13:4-18 - Error: Module not found: Error: Can't resolve 'dns' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/cacheable-lookup/source'

./node_modules/http2-wrapper/source/agent.js:5:12-26 - Error: Module not found: Error: Can't resolve 'tls' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/http2-wrapper/source'

./node_modules/http2-wrapper/source/agent.js:7:14-30 - Error: Module not found: Error: Can't resolve 'http2' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/http2-wrapper/source'

./node_modules/http2-wrapper/source/client-request.js:5:14-30 - Error: Module not found: Error: Can't resolve 'http2' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/http2-wrapper/source'

./node_modules/http2-wrapper/source/index.js:3:14-30 - Error: Module not found: Error: Can't resolve 'http2' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/http2-wrapper/source'

./node_modules/http2-wrapper/source/utils/calculate-server-name.js:3:12-26 - Error: Module not found: Error: Can't resolve 'net' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/http2-wrapper/source/utils'

./node_modules/resolve-alpn/index.js:5:12-26 - Error: Module not found: Error: Can't resolve 'tls' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/resolve-alpn'

[ERROR] An error occurred while running subprocess ng.

      ng run app:build exited with exit code 1.

      Re-running this command with the --verbose flag may provide more information.

sultanmyrza@MacBook-Pro-SK capture-lite %

- History restored

sultanmyrza@MacBook-Pro-SK capture-lite %

I will contine work on and see if I how 2nd error can be resolved.

[sultanmyrza]

Regarding ionic build errors after WIP: fix ionic build errors 1 as mentioned here.

I think we might need do a workaround.

I ask gpt4 the following question (click to expand)

In my angular ionic project I installed https://www.npmjs.com/package/@numbersprotocol/nit and now during ionic build I'm getthing the following erros

./node_modules/@numbersprotocol/estuary-upload/dist/browser/estuary-upload.js:12:82-95 - Error: Module not found: Error: Can't resolve 'fs' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/@numbersprotocol/estuary-upload/dist/browser'

./node_modules/@numbersprotocol/nit/node_modules/got/dist/source/core/index.js:14:13-26 - Error: Module not found: Error: Can't resolve 'fs' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/@numbersprotocol/nit/node_modules/got/dist/source/core'

./node_modules/@numbersprotocol/nit/node_modules/got/dist/source/core/utils/get-body-size.js:9:13-26 - Error: Module not found: Error: Can't resolve 'fs' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/@numbersprotocol/nit/node_modules/got/dist/source/core/utils'

./node_modules/@numbersprotocol/nit/node_modules/got/dist/source/core/utils/timed-out.js:8:12-26 - Error: Module not found: Error: Can't resolve 'net' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/@numbersprotocol/nit/node_modules/got/dist/source/core/utils'

./node_modules/cacheable-lookup/source/index.js:13:4-18 - Error: Module not found: Error: Can't resolve 'dns' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/cacheable-lookup/source'

./node_modules/http2-wrapper/source/agent.js:5:12-26 - Error: Module not found: Error: Can't resolve 'tls' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/http2-wrapper/source'

./node_modules/http2-wrapper/source/agent.js:7:14-30 - Error: Module not found: Error: Can't resolve 'http2' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/http2-wrapper/source'

./node_modules/http2-wrapper/source/client-request.js:5:14-30 - Error: Module not found: Error: Can't resolve 'http2' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/http2-wrapper/source'

./node_modules/http2-wrapper/source/index.js:3:14-30 - Error: Module not found: Error: Can't resolve 'http2' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/http2-wrapper/source'

./node_modules/http2-wrapper/source/utils/calculate-server-name.js:3:12-26 - Error: Module not found: Error: Can't resolve 'net' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/http2-wrapper/source/utils'

./node_modules/resolve-alpn/index.js:5:12-26 - Error: Module not found: Error: Can't resolve 'tls' in '/Users/sultanmyrza/Clients/numbersprotocol/capture-lite/node_modules/resolve-alpn'

And got the following answer. No. 1, 3 and 5 are good points

The errors you're encountering during the build process of your Angular Ionic project are related to module resolution failures for Node.js core modules like fs, net, dns, tls, and http2. These modules are part of Node.js's standard library and are not available in a browser environment, which is likely the cause of the errors since Angular and Ionic typically target browser environments.

Here are some steps to troubleshoot and potentially resolve these issues:

1. Check Package Compatibility: Ensure that the @numbersprotocol/nit package and its dependencies are meant to be used in a browser environment. Some packages are designed specifically for Node.js and will not work in a browser.

2. Verify Your Build Configuration: Angular and Ionic use Webpack or similar bundlers under the hood. These tools often have configurations to shim or exclude Node.js core modules for browser builds. Check your project's build configuration to ensure it's set up correctly for a browser target.

3. Use Browser-Friendly Alternatives: If @numbersprotocol/nit or its dependencies require Node.js core modules, you might need to find browser-friendly alternatives or polyfills. Some packages offer separate builds for Node.js and browsers.

4. Examine Package Dependencies: It's possible that the version of @numbersprotocol/nit or its dependencies you're using isn't compatible with your current project setup. Checking the package documentation for compatibility notes or looking for similar issues on the package's issue tracker can provide insights.

5. Manual Installation of Missing Modules: As a last resort, you could try manually installing polyfills for the missing modules. However, this is usually not recommended because it can lead to unexpected behavior, especially if the package isn't meant for browser use.

6. Consult Documentation and Community: Check the documentation of @numbersprotocol/nit and Angular/Ionic for any notes on integration issues. Also, community forums or the issue trackers of the involved projects can be valuable resources.

7. Fallback to Server-Side Processing: If the package is strictly for server-side use, consider implementing the functionality it provides on the server side of your application, and then communicate with your Angular Ionic app via API calls.

If you continue to face issues, providing more information about your project setup, including versions of Angular, Ionic, and other key dependencies, could help in diagnosing the problem more accurately.