title: Make Angular 12 app run on really old browser
body: <p>this is my version of Angular:</p>
  <pre><code>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
  </code></pre>
  <p>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.</p>
  <p>I tried to solve the issue for IE 11 first.
  I initially had a blank page when reaching the homepage of the app.</p>
  <p>I've made the following changes :</p>
  <ol>
  <li>I've changed the <code>tsconfig</code> file as follow:</li>
  </ol>
  <pre><code>&quot;target&quot;: &quot;es5&quot;,
  &quot;lib&quot;: [
        &quot;es5&quot;,
        &quot;es2015.promise&quot;,
        &quot;es6&quot;,
        &quot;es7&quot;,
        &quot;es2018&quot;,
        &quot;dom&quot;
      ]
  </code></pre>
  <ol start="2">
  <li>I've updated my <code>polyfill.ts</code> file as follow:</li>
  </ol>
  <pre class="lang-js prettyprint-override"><code>/**
   * 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 &quot;evergreen&quot; browsers; the last versions of browsers that
   * automatically update themselves. This includes Safari &gt;= 10, Chrome &gt;= 55 (including Opera),
   * Edge &gt;= 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
   */
  </code></pre>
  <ol start="3">
  <li>I've updated my <code>browserslist</code> file as follow</li>
  </ol>
  <pre><code>&gt; 0.5%
  last 2 versions
  Firefox ESR
  not dead
  IE 9-10 # For IE 9-11 support, remove 'not'.
  </code></pre>
  <ol start="4">
  <li>I have the follow babelrc file :</li>
  </ol>
  <pre><code>{
    &quot;presets&quot;: [
      [&quot;@babel/presets-env&quot;, {
        &quot;targets&quot;: {
          &quot;browsers&quot;: {
            &quot;ie&quot;: &quot;11&quot;
          }
        },
      }]
    ]
  }
  </code></pre>
  <p>With this configuration, in IE 11 I can finally see my login page.
  My login page has the following &quot;login&quot; button:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;
            &lt;button mat-flat-button [disabled]=&quot;!this.credentials.password&quot;
              [ngClass]=&quot;{'button-action': this.credentials.login &amp;&amp; this.credentials.password}&quot; class=&quot; full-width &quot;
             (click)=&quot;alert('lalalalala')&quot;&gt;&lt;span class=&quot;fs-12 light&quot;&gt;LOGIN&lt;/span&gt;&lt;/button&gt;
          &lt;/div&gt;
  </code></pre>
  <ol>
  <li>Do I really need the babelrc file or is it just enough to update the tsconfig file and the polyfill.ts file?</li>
  <li>Is Angular material not supporting IE11 the reason why <code>alert</code> is not triggered on the <code>onclick</code> event?</li>
  <li>I've tried to launch my app with Firefox 42, and I have the following error that I don't understand:</li>
  </ol>
  <pre><code>TypeError: client.onOpen is not a function
  </code></pre>
  <pre><code>Unhandled Promise rejection: zone.onStable.emit is not a function ; Zone: &lt;root&gt; ; Task: Promise.then ; Value: TypeError: zone.onStable.emit is not a function
  </code></pre>
  <p>Thank you for your help!</p>
  <p><strong>EDIT : I was able to try / catch the login call and alert the error.
  The error is <code>ReferenceError: crypto is not defined</code>.
  Any ideas?</strong></p>