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.

Answer 1

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;
}

Answer 2

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