Angular 2: Check whether user's browser is compatible

Question

I'm writing an Angular 2 app but am conscious that some users may not be using a browser that can support Angular 2.

I have a check for whether Javascript is enabled, I am more interested in whether the user's browser doesn't support certain JS/HTML5/other features required by Angular 2.

What would be the best way to assess whether the user's browser supports Angular 2, and display a message if not?

I'm aware of e.g. Modernizer, but not sure where to begin as Modernizer's focus seems to be on assembling compatibility checks piecemeal rather than providing a solution that checks for compatibility of whole frameworks.

score 24 · Accepted Answer · answered Apr 26 '16 at 23:50

Angular 2, and display a message if not?

The version of browsers that angular supports officially might not be the version of browsers your app works (it may be more or it may be less).

You have to do individual browser checks yourself. e.g. Detect IE : http://codepen.io/gapcode/pen/vEJNZN

/**
 * detect IE
 * returns version of IE or false, if browser is not Internet Explorer
 */
function detectIE() {
  var ua = window.navigator.userAgent;

  // Test values; Uncomment to check result …

  // IE 10
  // ua = 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)';

  // IE 11
  // ua = 'Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko';

  // IE 12 / Spartan
  // ua = 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0';

  // Edge (IE 12+)
  // ua = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586';

  var msie = ua.indexOf('MSIE ');
  if (msie > 0) {
    // IE 10 or older => return version number
    return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
  }

  var trident = ua.indexOf('Trident/');
  if (trident > 0) {
    // IE 11 => return version number
    var rv = ua.indexOf('rv:');
    return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
  }

  var edge = ua.indexOf('Edge/');
  if (edge > 0) {
    // Edge (IE 12+) => return version number
    return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
  }

  // other browser
  return false;
}

Thank you for your answer. I take your point on the workings being more or less supported and difficult to predict. I am adding browser checks now as a first-pass method, using [Bowser](https://github.com/ded/bowser). I am still keen for whether there is any definitive answer to this question though. — Harry, May 03 '16 at 12:37

Michael Kang · Answer 2 · 2016-04-27T02:57:08.943

Not all browsers fully support ES6 (ES2015) standard yet.

https://kangax.github.io/compat-table/es6/

If you want to use ES6 language features for your Angular 2 app then you should include the ES6 shim to bring your browser up-to-spec:

https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js

That being said, IE seems to be the exception. There are additional polyfills that you need to include to support IE:

https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js

If you want to target ES5 (older standard), you need to ensure that you write your angular app using ES5 language features only. In general, there is more browser support for ES5 features, but it's not perfect:

http://kangax.github.io/compat-table/es5/

Of course, there's a shim for that too:

https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.8/es5-shim.min.js

Thanks for your answer. As per the Angular 2 quickstart setup, I'm using the ES6 and IE shims already, in addition to Angular 2 and SystemJS polyfills, but I wasn't aware of the ES5 shim. However, I'm less concerned (at the moment) about supporting older standards so much as detecting incompatible browsers and telling the user in order to make sure that they aren't left confused if/when things don't work. — Harry, Apr 27 '16 at 11:22

Angular 2: Check whether user's browser is compatible

2 Answers2

Linked