在 Angular 中使用带有 core-ui 的 web3 时出现的问题

Question

我正在尝试构建一个 web3 Web 应用程序。我正在使用 Angular 和 web3 包。要求是从 core-ui 的默认管理面板开始，所以我首先安装它。然后我添加了一个初始的 web3 助手。解决了 web3 的 github 页面中提到的所有冲突后，我遇到了当我使用 web3 助手中的任何方法时即将出现的构建问题。

请注意，当我从头开始一个项目（即不使用 core-ui）时，不会发生此问题

我知道我可以添加填充（如错误消息所述）并且我已经尝试了此处提到的解决方案，但似乎没有一个去工作。

控制台消息

Warning: E:\Prog\repositories\angular\web3-roynex\node_modules\@walletconnect\browser-utils\dist\esm\browser.js depends on '@walletconnect/window-metadata'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: E:\Prog\repositories\angular\web3-roynex\node_modules\@walletconnect\core\dist\esm\index.js depends on '@walletconnect/socket-transport'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: E:\Prog\repositories\angular\web3-roynex\node_modules\@walletconnect\jsonrpc-utils\dist\esm\env.js depends 
on '@walletconnect/environment'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: E:\Prog\repositories\angular\web3-roynex\node_modules\@walletconnect\utils\dist\esm\encoding.js depends on 
'@walletconnect/encoding'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: E:\Prog\repositories\angular\web3-roynex\node_modules\@walletconnect\utils\dist\esm\url.js depends on 'query-string'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: E:\Prog\repositories\angular\web3-roynex\src\app\helpers\web_helper_pro.ts depends on '@walletconnect/web3-provider'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: E:\Prog\repositories\angular\web3-roynex\src\app\helpers\web_helper_pro.ts depends on 'web3'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies



./node_modules/cipher-base/index.js:2:16-43 - Error: Module not found: Error: Can't resolve 'stream' in 'E:\Prog\repositories\angular\web3-roynex\node_modules\cipher-base'

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: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

./node_modules/eth-lib/lib/bytes.js:9:193-227 - Error: Module not found: Error: Can't resolve 'crypto' in 'E:\Prog\repositories\angular\web3-roynex\node_modules\eth-lib\lib'

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: { "crypto": require.resolve("crypto-browserify") }'
        - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "crypto": false }

./node_modules/web3-eth-accounts/lib/index.js:26:76-93 - Error: Module not found: Error: Can't resolve 'crypto' in 'E:\Prog\repositories\angular\web3-roynex\node_modules\web3-eth-accounts\lib'

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: { "crypto": require.resolve("crypto-browserify") }'
        - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "crypto": false }

./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/bytes.js:7:193-227 - Error: Module not found: Error: Can't resolve 'crypto' in 'E:\Prog\repositories\angular\web3-roynex\node_modules\web3-eth-accounts\node_modules\eth-lib\lib'

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: { "crypto": require.resolve("crypto-browserify") }'
        - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "crypto": false }

./node_modules/web3-providers-http/lib/index.js:30:11-26 - Error: Module not found: Error: Can't resolve 'http' in 'E:\Prog\repositories\angular\web3-roynex\node_modules\web3-providers-http\lib'

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: { "http": require.resolve("stream-http") }'
        - install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "http": false }

./node_modules/web3-providers-http/lib/index.js:32:12-28 - Error: Module not found: Error: Can't resolve 'https' in 
'E:\Prog\repositories\angular\web3-roynex\node_modules\web3-providers-http\lib'

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: { "https": require.resolve("https-browserify") }'
        - install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "https": false }

./node_modules/xhr2-cookies/dist/xml-http-request.js:37:11-26 - Error: Module not found: Error: Can't resolve 'http' in 'E:\Prog\repositories\angular\web3-roynex\node_modules\xhr2-cookies\dist'

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: { "http": require.resolve("stream-http") }'
        - install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "http": false }

./node_modules/xhr2-cookies/dist/xml-http-request.js:39:12-28 - Error: Module not found: Error: Can't resolve 'https' in 'E:\Prog\repositories\angular\web3-roynex\node_modules\xhr2-cookies\dist'

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: { "https": require.resolve("https-browserify") }'
        - install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "https": false }

./node_modules/xhr2-cookies/dist/xml-http-request.js:41:9-22 - Error: Module not found: Error: Can't resolve 'os' in 'E:\Prog\repositories\angular\web3-roynex\node_modules\xhr2-cookies\dist'

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: { "os": require.resolve("os-browserify/browser") }'
        - install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "os": false }

package.json

{
  "name": "coreui-free-angular-admin-template",
  "version": "4.0.0-alpha.4",
  "config": {
    "coreui_library_short_version": "4.0",
    "coreui_library_docs_url": "https://coreui.io/angular/docs/"
  },
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.2.0",
    "@angular/cdk": "~13.2.0",
    "@angular/common": "~13.2.0",
    "@angular/compiler": "~13.2.0",
    "@angular/core": "~13.2.0",
    "@angular/forms": "~13.2.0",
    "@angular/language-service": "~13.2.0",
    "@angular/platform-browser": "~13.2.0",
    "@angular/platform-browser-dynamic": "~13.2.0",
    "@angular/router": "~13.2.0",
    "@coreui/angular": "^4.0.0-alpha.9",
    "@coreui/angular-chartjs": "^2.0.0-alpha.9",
    "@coreui/chartjs": "^3.0.0",
    "@coreui/coreui": "~4.0.5",
    "@coreui/icons": "^2.1.0",
    "@coreui/icons-angular": "^3.0.0-alpha.4",
    "@coreui/utils": "^1.3.1",
    "@types/react": "^17.0.39",
    "@types/react-dom": "^17.0.11",
    "@walletconnect/web3-provider": "^1.7.1",
    "chart.js": "^3.6.1",
    "ngx-perfect-scrollbar": "^10.1.1",
    "ngx-toastr": "^14.2.1",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "url": "^0.11.0",
    "web3": "^1.7.0",
    "web3modal": "^1.9.5",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.2.0",
    "@angular/cli": "~13.2.0",
    "@angular/compiler-cli": "~13.2.0",
    "@angular/localize": "~13.2.0",
    "@types/jasmine": "~3.10.3",
    "@types/node": "^16.11.25",
    "assert": "^2.0.0",
    "crypto-browserify": "^3.12.0",
    "https-browserify": "^1.0.0",
    "jasmine-core": "~3.10.0",
    "karma": "~6.3.16",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~4.0.1",
    "karma-jasmine-html-reporter": "~1.7.0",
    "os-browserify": "^0.3.0",
    "stream-browserify": "^3.0.0",
    "stream-http": "^3.2.0",
    "typescript": "~4.5.2"
  },
  "engines": {
    "node": "^12.20.0 || ^14.15.0 || >=16.10.0",
    "npm": ">= 6"
  }
}

tsconfig.json

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": [
      "es2020",
      "dom"
    ],
    "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"]
  }
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  },
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.spec.json" },
  ]
}

angular.json

  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "cli": {
    "analytics": false
  },
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "coreui-free-angular-admin-template": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        },
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/coreui-free-angular-admin-template",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "preserveSymlinks": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/scss/styles.scss"
            ],
            "scripts": [],
            "allowedCommonJsDependencies": [
              "chart.js",
              "@coreui/chartjs/dist/js/coreui-chartjs.js",
              "crypto",
              "stream",
              "https",
              "stream-http"
            ]
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "1500kb",
                  "maximumError": "6mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "coreui-free-angular-admin-template:build:production"
            },
            "development": {
              "browserTarget": "coreui-free-angular-admin-template:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "coreui-free-angular-admin-template:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/scss/styles.scss"
            ],
            "scripts": []
          }
        }
      }
    }
  },
  "defaultProject": "coreui-free-angular-admin-template"
}

webpack.config.js >

module.exports = {
    resolve: {
      fallback: {
        "os": require.resolve("os-broswerify/browser"),
        "http": require.resolve("stream-http"),
        "https": require.resolve("stream-http"),
        "stream": require.resolve("stream-browerify"),
        "crypto": require.resolve("crypto-browserify"),
        "crypto-browserify": require.resolve('crypto-browserify')
      } 
    }
}