Transpile Angular project with Babel + Webpack

webpack.config.js

/**
 * ## Angular custom webpack config for compatibility with IE11
 * ------------------------------------------------------------
 * 1. Add this file to your project root. Add the modules list that needs transpiling (see below code).
 * 2. Install dev dependencies:
 *
 *     `$ npm i -D @angular-builders/custom-webpack:browser babel-loader @babel/core @babel/preset-env browserlist`
 *
 * 3. Add this to your `angular.json`:
 *
 *     ```json
 *     "projects": {
 *       "app": {
 *         "architect": {
 *           "build": {
 *             "builder": "@angular-builders/custom-webpack:browser",
 *             "options": {
 *               "customWebpackConfig": {
 *                 "path": "./webpack.config.js",
 *                 "replaceDuplicatePlugins": true
 *               }
 *             }
 *           }
 *         }
 *       }
 *     }
 *     ```
 */

module.exports = {
  module: {
    rules: [
      {
        test: /\.m?js$/,
        /**
         * Exclude `node_modules` except the ones that need transpiling for IE11 compatibility.
         * Run `$ npx are-you-es5 check . -r` to get a list of those modules.
         */
        exclude: /[\\/]node_modules[\\/](?!(incompatible-module1|incompatible_module_2|some_other_nested_module)[\\/])/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                targets: {
                  // Criteria for selecting browsers. See https://github.com/browserslist/browserslist
                  browsers: ['> 0.5%', ' last 2 versions', ' Firefox ESR', ' not dead', ' IE 11']
                }
              }]
            ]
          }
        }
      }
    ]
  }
};

Thank you for sharing this!

Glad it helps 🙂

Thanks bruh! 🥳

The last package in the npm i command should be browserslist, not browserlist, and @angular-builders/custom-webpack:browser should be @angular-builders/custom-webpack (in the install command).