I am building an Electron app and use Angular v11 and webpack v4.

I want to upgrade both to Angular v13 and webpack v5. Most upgrade guides refer to common web apps, but given the Electron foundation, I am running into some unexpected issues.

My current problem is this error message:

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 }

According to several guides, there are several locations where I have to adjust my settings, but none of them work. Can anyone point out to me which are the correct changes, and which one I can ignore or revert?

angular.json

allowedCommonJsDependencies: [
// add crypto, os, ...
"crypto", "os", ...
]

tsconfig.json

  "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"],
    },

webpack.config.js

  resolve: {
    extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],// other stuff
    fallback: {
      crypto: "crypto-browserify",
      http: "stream-http",
      https: "https-browserify",
      os: "os-browserify/browser",
      path: "path-browserify",
      stream: "stream-browserify",
      process: "process/browser",
      url: "url/",
    }
  },

CodePudding user response：

1.npm install stream-browserify 2.Add a path mapping in tsconfig.json:

  ...
  "compilerOptions": {
    "paths": {
      "stream": [ "./node_modules/stream-browserify" ]
    },

3.Add stream to allowedCommonJsDependencies in angular.json:

"options": {
            "allowedCommonJsDependencies": [
              "angular-slickgrid", "stream"
            ],