Menu
Here are the steps I took to create an example Angular app:
npm i -g @angular/cli (Installed Angular 11.2)ng new foocd foo.browserslistrc with last 1 Chrome version. (Running npx browserslist then prints only chrome 89, as expected.)ng build --prodHere is the result:
$ ng build --prod
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.
Initial Chunk Files | Names | Size
main.feaf6a85348d901578d8.js | main | 211.52 kB
polyfills.00096ed7d93ed26ee6df.js | polyfills | 35.98 kB
runtime.7b63b9fd40098a2e8207.js | runtime | 1.45 kB
styles.09e2c710755c8867a460.css | styles | 0 bytes
| Initial Total | 248.95 kB
Build at: 2021-03-16T14:41:16.954Z - Hash: 57aec26226ae3eb0ee1b - Time: 12529ms
I'm surprised that it compiles 36kb of polyfills when all I'm supporting is the latest version of Chrome. To my way of thinking, this should require few if any polyfills.
What do these 36kb do? It's hard for me to tell because the file is minified.
759
There can be numerous reasons why your Angular application is not working, including: Missing polyfills in polyfills. ts . Using a TypeScript target version which IE11 does not support.
Polyfillslink Angular is built on the latest standards of the web platform. Targeting such a wide range of browsers is challenging because they do not support all features of modern browsers. You compensate by loading polyfill scripts ("polyfills") for the browsers that you must support.
There are two ways you can support IE 11 with Angular 12 as you prepare to migrate to Angular 13: Update tsconfig. json to use ES5 and update polyfills. ts for ES6/ES7.
Browserslist is a tool that allows specifying which browsers should be supported in your frontend app by specifying "queries" in a config file. It's used by frameworks/libraries such as React, Angular and Vue, but it's not limited to them.
Starting from a very simple scenario where we load all the possible modules to more advanced ones. The polyfills are often a neglected part of an Angular application resulting in a performance loss for your web application and users. In our first case, we are just blindly uncommenting all the imports statements in our polyfills files.
An Angular application created with the angular-cli contain the file src/polyfills.ts. The file highlight the different modules that might be needed for a specific browser in order to work properly.
We are currently loading polyfills to support IE11. However most of our users use modern browsers that have built-in support for the things we need. There are ways to download only necessary polyfills for example checking the browser user agent string. There are even services like Polyfill.io that do it for you.
Talking about Angular and the CLI make sure to enable lazy loading and lazy load your routes, that way the initial payload stays smaller as your application grows more and more complex and full of features. Since the generated bundles are hashed they are cached properly thanks to the cache headers from the earlier section.
Even if you remove .browserlistrc or comment out everything, you will get: 35.98 kB.
With just that one line, browserlist falls back to the value of defaults, which includes: > 0.5%, last 2 versions, Firefox ESR, not dead
Note that these default values are mainly relevant due to Zone.js support, as you can see for yourself. Try ng build without the --prod flag and you get a nicely commented polyfills file: (Showing first few lines only, for .browserlistrc: last 1 Chrome version)
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main^M
* file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/guide/browser-support
*/
Learn more in https://angular.io/guide/browser-support
76
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
