- 3 minutes read

The other day I demonstrated the polyfills file during my Angular course. I'm teaching this course several times a year, so I knew what the polyfills.ts looks like. Only - it looked different. The list of ES6 polyfills wasn't there. What happened?

Well, Angular CLI 7.3 happened. The Angular team has found a better approach to polyfills. It saves 56 KB of bandwidth on most browsers. For some reason, this change went by widely unnoticed.

The nomodule attribute

Until recently, it was up to the programmer to decide if Angular uses the polyfills for ES6. By default, these polyfills are deactivated. I suppose that means almost every developer activates them. Internet Explorer doesn't work without them. Nor does the Google's crawler bot (unless they've updated it in the meantime).

However, there's a trick to load the ES6 polyfills if and only if they're needed:

Adding the nomodule tells modern browsers to ignore the script.

Configuring polyfills

So the Angular team moved the ES6 polyfills to another file. If you're looking for it: it's hidden deep, deep in the node_module folder. In other words: you can't modify it. It's part of the Angular CLI.

Come to think of it, why should you modify the ES6 polyfills list? It's fine-tuning the polyfills is difficult. Plus, there's little to win. The ES6 polyfill target die-hard legacy browsers. If you have to use them for some reason, you probably have more pressing concerns than Angular performance.

The remaining polyfills.ts file is almost empty - apart from a plethora of comments. There's only one choice left. You can activate web animations or not.

Updating your project

Starting with version 7.3 the feature is active by default. You can deactivate it by setting the angular.json option architect.build.options.es5BrowserSupport to false.

Most of the time, you're most interested in the other way round. To activate the feature, update to Angular CLI 7.3 or higher, add the new flag to the angular.json, and set it to true. Delete every ES6-related line from the polyfills.ts file - that's line 21 to 46, give or take a few, depending on your code formatter.

Wrapping it up

Even small changes make a difference, especially if they pile up during several versions. This change is small enough to miss. I guess I'd noticed a lot later if I weren't an Angular teacher. It's the same old story: the teacher learns more than their students do!


Dig deeper

Minko Gechev's announcement on Twitter

Minko Gechev's blog about this and other Angular features

Netanel Basal on the topic


Comments