Last active
May 11, 2022 18:35
-
-
Save RaschidJFR/91e6238bfaf4db507c88afe259a5abf0 to your computer and use it in GitHub Desktop.
Transpile Angular project with Babel + Webpack
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* ## 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'] | |
} | |
}] | |
] | |
} | |
} | |
} | |
] | |
} | |
}; |
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).
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you for sharing this!