Search code examples
angularpolyfills

How to make latest Angular versions compatible with old Browsers?


Angular states in its documentation that it is compatible with 2 most recent versions (and latest+ESR for Firefox) for all major browsers. Since Angular uses standard DOM API under the hood it should be possible to polyfill Angular to be compatible with old browsers.

My concrete usecase for this is: I need to support old browsers which are not updateable since they are backed into the the firmware of a device (don't be afraid they are not connected to the internet -> no security issues)

The questions are:

  • Is there a list of browser features which have to be polyfilled?
  • Did anyone already do this kind of stuff?
  • Is there a list of existing polyfills which could do the job? Is the core-js polyfill enough?

Solution

  • Is there a list of browser features which have to be polyfilled?

    Yes, but this depends on what browsers you are targeting. It sounds like you have a well defined list of browsers, so you should be able to find a list of required polyfills with:

    Does anybody already do this?

    Yes, but the problems tend to be, like yours, very context specific. Nobody is building angular apps with complex functionality and targeting 100% of browsers.

    Generally speaking, bundling tools typically allow you to specify target browsers, though the exact browsers you're targeting might not be available as target browser options for your bundling tool.

    Since you're using Angular, you can specify browsers to target in .browserslistrc in the root of the app. If for example you were targeting IE 11, this could look like:

    >0.25%
    IE 11
    

    Is there a list of existing polyfills which could do the job? Is the core-js polyfill enough?

    Again this depends on exactly what you need to polyfill. If it's a simple app, core-js may be sufficient - the best way to find out is to use core-js and see if it works. If not, you should always be able to find a package that will polyfill for you. Make sure to avoid unnecessary features that would require polyfilling (e.g. Angular animations would likely require a polyfill for the browsers you are targeting. It may be easier to simply not have animations).

    Make sure to wrap deployments in e2e tests for the browsers you're targeting

    Going forward you will need to add e2e tests for your target browsers do your deployment process.