Step by step guide to upgrade Angular from 10 to 14

  BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you n...

 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.

Step by step Method to upgrade from angular 10 to 14

While upgrading to the new version we may encounter errors. below are the errors encountered.

#1 Exception / Error

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 }

Maybe this one occurs because if directly upgrade from 10 to 14 actually the process is a step by step version upgradation of angular
 

#Solution 1

To solve this, install path-browserify 

              

      npm install path-browserify 

open tsconfig.json and put this code

{
  "compileOnSave": false,
  "compilerOptions": {
    "paths": {
      "path": [
        "./node_modules/path-browserify"
      ]
    },
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": false,
    "strictInputAccessModifiers": false,
    "strictTemplates": false
  }
}

and maybe you have to install also util

        npm install util

#Solution 2

To solve this, install path-browserify 

npm i path-browserify -D

// tsconfig.json

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

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "es2020",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "allowSyntheticDefaultImports": true,
    // "strictFunctionTypes": true,
    // "noImplicitReturns": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "path": [
        "./node_modules/path-browserify"
      ]
    }
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}
`

tips: is you using a extends, just make sure put the code on the base config.

#Solution 3 

if you already have browserify.Then don't need to install anything. Adding the below code to the tsconfig file you can fix the issue

"paths": { "path": [ "./node_modules/path-browserify" ] },
#2 Exception / Error
Solution to cypress+cucumber+webpack5 issue that has been occured after angular 12 update
First we got the error below;
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 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "assert": false }
To solve this, install path-browserify and add your webpack.config.js the line below;
resolve: {
    ......
    fallback: { path: require.resolve('path-browserify') }
  },
Then we got this errors from cypress
The following error originated from your test code, not from Cypress.

  > process is not defined
To solve this, install node-polyfill-webpack-plugin and add to your webpack.config.js as a plugin
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
...
plugins: [new NodePolyfillPlugin()],