Configuring Angular for older browsers
In recent versions, Angular is preconfigured for an ES2015 build which only works in modern browsers. Often, that's not an issue. Fortunately, it's still possible to make it compatible with older browsers (e.g. Internet Explorer or old Chromium versions in embedded devices) when that's a requirement.
If you try to open a newly created Angular project in Internet Explorer, you'll only be greeted with a blank page. And a couple of errors in its console. This happens because the default Angular build targets ES2015 which isn't supported in Internet Explorer.
Angular's solution to this problem is differential loading, i.e. an ES5 build in addition to the default ES2015 build. The two builds are configured in a way allowing modern browsers to still use the ES2015 build while older browsers fall back to the ES5 build.
Differential loading configuration depends on browserslist. This allows you to specify in detail which browsers you want to support by modifying the .browserslistrc file. I ended up simply using defaults which worked for me.
With this configuration change, the default Angular project started working in old browsers without errors. Just keep in mind that it will only affect the standalone build and won't change your local development environment when using ng serve. Angular documentation includes instructions for setting up the latter as well.
Even with an ES5 build, you might still break your application in old browsers if you use parts of modern ECMAScript that aren't used by Angular because the polyfills for them are not included. For example, the following piece of code won't work in Internet Explorer even with an ES5 build:
const params = {
key1: "value1",
key2: "value2",
key3: "value3",
};
const queryString = Object.entries(params)
.map(([key, value]) => `${key}=${value}`)
.join("&");
In this case, the offender is Object.entries(). To avoid such issues, you can decide not to use unsupported parts of ECMAScript, or you can add the necessary polyfills to your project.
The best source of polyfills is core-js which allows you to selectively include only the polyfills that you need. To make the above code snippet work in old browsers, you only need to add the following to the polyfills.ts file in your Angular project:
import "core-js/features/object/entries";
You can find a minimum Angular project configured with all of the above in my GitHub repository.
Although Angular is not configured for old browsers by default, you can easily support them with your application by enabling differential loading. If you use modern ECMAScript in your application code as well, you might still need to add some polyfills for that to work.
