browser-support.jade

block includes
  include ../_util-fns
  - var _at_angular = '@angular'

:marked
  Angular supports most recent browsers. This includes the following specific versions:

table
  tr
    th Chrome
    th Firefox
    th Edge
    th IE
    th Safari
    th iOS
    th Android
    th IE mobile
  tr
    td latest
    td latest
    td 14
    td 11
    td 10
    td 10
    td Marshmallow (6.0)
    td 11
  tr
    td
    td
    td 13
    td 10
    td 9
    td 9
    td Lollipop<br>(5.0, 5.1)
    td
  tr
    td
    td
    td
    td 9
    td 8
    td 8
    td KitKat<br>(4.4)
    td
  tr
    td
    td
    td
    td
    td 7
    td 7
    td Jelly Bean<br>(4.1, 4.2, 4.3)
    td
    
    
.l-sub-section
  :marked
    Angular's continuous integration process runs unit tests of the framework on all of these browsers for every pull request, 
    using <a href="https://saucelabs.com/" target="_blank">SauceLabs</a> and 
    <a href="https://www.browserstack.com" target="_blank">Browserstack</a>.

:marked
  ## Polyfills #
  Angular is built on the latest standards of the web platform.
  Targeting such a wide range of browsers is challenging because they do not support all features of modern browsers.
  
  You compensate by loading polyfill scripts ("polyfills") on the host web page (`index.html`)
  that implement missing features in JavaScript.
+makeExample('quickstart/ts/index.html', 'polyfills')(format='.')
:marked
  A particular browser may require at least one polyfill to run _any_ Angular application. 
  You may need additional polyfills for specific features.

  The tables below will help you determine which polyfills to load, depending on the browsers you target and the features you use.
  
.alert.is-important
  :marked
    The suggested polyfills are the ones we know will run full Angular applications.
    You may need additional polyfills to support features not covered by this list.
    Note that polyfills cannot magically transform an old, slow browser into a modern, fast one.
  
:marked
  ### Mandatory polyfills ##
  These are the polyfills required to run an Angular application on each supported browser:
  
table
  tr(style="vertical-align: top") 
    th Browsers (desktop & mobile)
    th Polyfills required
  tr(style="vertical-align: top") 
    td Chrome, Firefox, Edge, Safari 9+
    td None
  tr(style="vertical-align: top") 
    td Safari 7 & 8, IE10 & 11, Android 4.1+
    td
      :marked
        [ES6](#core-es6)
  tr(style="vertical-align: top") 
    td IE9
    td
      :marked
        [ES6<br>classList](#classlist)

:marked
  ### Optional browser features to polyfill ##
  Some features of Angular may require additional polyfills.
  
  For example, the animations library relies on the standard web animation API, which is only available in Chrome and Firefox today.
  You'll need a polyfill to use animations in other browsers.
  
  Here are the features which may require additional polyfills:

table
  tr(style="vertical-align: top") 
    th Feature
    th Polyfill
    th(style="width: 50%")  Browsers (desktop & mobile)

  tr(style="vertical-align: top") 
    td
      a(href="./animations.html") Animations
    td
      :marked
        [Web Animations](#web-animations)
    td All but Chrome and Firefox<br>Not supported in IE9
  tr(style="vertical-align: top") 
    td
      a(href="../api/common/index/DatePipe-pipe.html" target="_blank") Date
      span ,  
      a(href="../api/common/index/CurrencyPipe-pipe.html" target="_blank") currency
      span , 
      a(href="../api/common/index/DecimalPipe-pipe.html" target="_blank") decimal
      span  and 
      a(href="../api/common/index/PercentPipe-pipe.html" target="_blank") percent
      span  pipes
    td
      :marked
        [Intl API](#intl)
    td All but Chrome, Firefox, Edge, IE11 and Safari 10
  tr(style="vertical-align: top") 
    td 
      a(href="../api/common/index/NgClass-directive.html" target="_blank") NgClass
      span  on SVG elements
    td 
      :marked
        [classList](#classlist)
    td IE10, IE11
  tr(style="vertical-align: top") 
    td
      a(href="./server-communication.html") Http
      span  when sending and receiving binary data
    td 
      :marked
        [Typed&nbsp;Array](#typedarray) <br>[Blob](#blob)<br>[FormData](#formdata)
    td IE 9

:marked
  ### Suggested polyfills ##
  Below are the polyfills which are used to test the framework itself. They are a good starting point for an application. 

table
  tr
    th Polyfill
    th Licence
    th Size*
  tr
    td
      a#core-es6(href="https://github.com/zloirock/core-js" target="_blank") ES6
    td MIT
    td 27.4KB
  tr
    td
     a#classlist(href="https://github.com/eligrey/classList.js" target="_blank") classList
    td Public domain
    td 1KB
  tr
    td
     a#intl(href="https://github.com/andyearnshaw/Intl.js" target="_blank") Intl
    td MIT / Unicode licence
    td 13.5KB
  tr
    td 
      a#web-animations(href="https://github.com/web-animations/web-animations-js" target="_blank") Web Animations
    td Apache
    td 14.8KB
  tr
    td
      a#typedarray(href="https://github.com/inexorabletash/polyfill/blob/master/typedarray.js" target="_blank") Typed Array
    td MIT
    td 4KB
  tr
    td 
      a#blob(href="https://github.com/eligrey/Blob.js" target="_blank") Blob
    td MIT
    td 1.3KB
  tr
    td 
      a#formdata(href="https://github.com/francois2metz/html5-formdata" target="_blank") FormData
    td MIT
    td 0.4KB

:marked
  * Figures are for minified and gzipped code, computed with the <a href="http://closure-compiler.appspot.com/home" target="_blank">closure compiler</a>