Now, let’s verify that it works.

ng build

In your project’s dist folder under your project name you should find a new es2015-polyfills.XXX.js file. This is the file that will be conditionally loaded if the browser requires those polyfills.

How do the browsers know whether or not to load the es2015-polyfills? Open the index.html from your project’s dist folder and look down at the bottom. The following script tags were added by the builder to your index.html during compilation (I’ve formatted these for the purpose of this article):

Notice the nomodule attribute on the es2105-polyfills line. The HTML spec for nomodule says:

The nomodule attribute is a boolean attribute that prevents a script from being executed in user agents that support module scripts.

Basically, if you put nomodule on a script tag, any evergreen browser which supports modules is going to ignore that script. So, your older browsers will download this, but the newer ones will not. This will save you about 56Kb on startup!

If you found this useful, please leave a few claps for me and follow me on Medium!

If you want to learn more about Angular, be sure and attend ng-conf, the biggest, best Angular conference around!