javascriptangularbrowserbrowser-supportbrowserslist

Angular 15: browserslist config ignored


Until now, I was importing core-js into polyfills.ts. However, this bloats the resulting bundle, so I'm trying to remove it.

In tsconfig.json, I have target: "ES2022", module: "es2020", among others.

According to the Angular docs (https://angular.io/guide/build), from Angular 15, .browserslistrc is used to determine the ES version of the resulting bundle. However, no matter what I specify in said file, I can't get my app working on Safari 11 (white screen of death):

(in main.js) TypeError: Xt.flat is not a function. 'Xt.flat' is undefined

I'm using this .browserslistrc file:

supports es6-module
not dead
not ios_saf <= 10.3
not safari <= 10.1
not safari tp
not edge <= 17

The builder used in angular.json is @angular-builders/custom-webpack


Solution

  • Array.flat is available from Safari 12 onwards. Browserlist won't polyfill it for you.

    Browserlist will just make sure that the syntax is okay (converting null coalescing etc.)

    The fix is to bring the polyfill yourself what core.js was doing.