Make Angular 12 app run on really old browser

Question

this is my version of Angular:

Angular CLI: 12.2.6
Node: 16.13.2 (Unsupported)
Package Manager: npm 8.1.2
OS: win32 x64

Angular: 12.2.6
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, material-moment-adapter, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.6
@angular-devkit/build-angular   12.2.6
@angular-devkit/core            12.2.6
@angular-devkit/schematics      12.2.6
@angular/flex-layout            12.0.0-beta.35
@schematics/angular             12.2.6
rxjs                            6.6.3
typescript                      4.2.4

I have an Angular app that works fine on the latest version of Chrome and Edge but most of our customers are using IE11, or really old versions of Chrome (ex: Chrome 45). So I need to make the app compatible with all these browsers.

I tried to solve the issue for IE 11 first. I initially had a blank page when reaching the homepage of the app.

I've made the following changes :

1. I've changed the tsconfig file as follow:

"target": "es5",
"lib": [
      "es5",
      "es2015.promise",
      "es6",
      "es7",
      "es2018",
      "dom"
    ]

2. I've updated my polyfill.ts file as follow:

/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/guide/browser-support
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
//import 'classlist.js';  // Run `npm install --save classlist.js`.
import 'core-js/es/symbol';
import 'core-js/es/object';
import 'core-js/es/function';
import 'core-js/es/parse-int';
import 'core-js/es/parse-float';
import 'core-js/es/number';
import 'core-js/es/math';
import 'core-js/es/string';
import 'core-js/es/date';
import 'core-js/es/array';
import 'core-js/es/regexp';
import 'core-js/es/map';
import 'core-js/es/weak-map';
import 'core-js/es/set';
import 'core-js/es/promise';


/**
 * Web Animations `@angular/platform-browser/animations`
 * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
 * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
 */
// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
/**
 * By default, zone.js will patch all possible macroTask and DomEvents
 * user can disable parts of macroTask/DomEvents patch by setting following flags
 * because those flags need to be set before `zone.js` being loaded, and webpack
 * will put import in the top of bundle, so user need to create a separate file
 * in this directory (for example: zone-flags.ts), and put the following flags
 * into that file, and then add the following code before importing zone.js.
 * import './zone-flags.ts';
 *
 * The flags allowed in zone-flags.ts are listed here.
 *
 * The following flags will work for all browsers.
 *
 * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
 * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
 * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
 *
 *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
 *  with the following flag, it will bypass `zone.js` patch for IE/Edge
 *
 *  (window as any).__Zone_enable_cross_context_check = true;
 *
 */

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
(window as any).__Zone_enable_cross_context_check = true;
import 'zone.js/dist/zone'; // Included with Angular CLI.


/***************************************************************************************************
 * APPLICATION IMPORTS
 */

3. I've updated my browserslist file as follow

> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-10 # For IE 9-11 support, remove 'not'.

4. I have the follow babelrc file :

{
  "presets": [
    ["@babel/presets-env", {
      "targets": {
        "browsers": {
          "ie": "11"
        }
      },
    }]
  ]
}

With this configuration, in IE 11 I can finally see my login page. My login page has the following "login" button:

<div>
          <button mat-flat-button [disabled]="!this.credentials.password"
            [ngClass]="{'button-action': this.credentials.login && this.credentials.password}" class=" full-width "
           (click)="alert('lalalalala')"><span class="fs-12 light">LOGIN</span></button>
        </div>

1. Do I really need the babelrc file or is it just enough to update the tsconfig file and the polyfill.ts file?
2. Is Angular material not supporting IE11 the reason why alert is not triggered on the onclick event?
3. I've tried to launch my app with Firefox 42, and I have the following error that I don't understand:

TypeError: client.onOpen is not a function

Unhandled Promise rejection: zone.onStable.emit is not a function ; Zone: <root> ; Task: Promise.then ; Value: TypeError: zone.onStable.emit is not a function

Thank you for your help!

EDIT : I was able to try / catch the login call and alert the error. The error is ReferenceError: crypto is not defined. Any ideas?