title: How to configure browser targetting with differential loading with es2016 or higher in angular 10
body: <p>I am looking for some advice regarding JS target output for compiled angular when using differential loading.</p>
  <p>It seems that out of the box the typescript in angular is compiled down to es5 and es2015 and depending on browser capabilities either the browser uses es5 or es2015.</p>
  <p>To keep things up-to-date I have been studying the different ES versions and the browsers that support them.</p>
  <p>But I have hit a brick wall and I can't seem to get any more information about this topic.</p>
  <p>I decided to increase the target output from es2015 to es2016 as it seems most modern browsers have full support for ES2016.</p>
  <p>I did this by setting the target value in tsconfig.json</p>
  <pre><code>&quot;compilerOptions&quot;: {
      &quot;target&quot;: &quot;es2016&quot;
  }
  </code></pre>
  <p>However, I have hit a snag.</p>
  <p>I'm getting the following warning on compile</p>
  <blockquote>
  <p>Warning: Using differential loading with targets ES5 and ES2016 or
  higher may cause problems. Browsers with support for ES2015 will load
  the ES2016+ scripts referenced with script[type=&quot;module&quot;] but they may
  not support ES2016+ syntax.</p>
  </blockquote>
  <p>So, basically I would like to understand how either Typescript/angular/the browser knows which is the right file to download when using a specific browser. (how does the targetting work)</p>
  <p>Can this be configured on a per browser instance? IE;-
  these browsers are to use es5, these es2015 and these are to use es2016. I just don't understand how differential loading targets specific browsers.</p>
  <p>And if there is any real benefit in using a later version than es2015 (I'm guessing fewer polyfills and more native code in the output? Faster? Smaller compiled files?</p>
  <p>thanks in advance.</p>