Angular 2: Check whether user's browser is compatible Angular 2: Check whether user's browser is compatible javascript javascript

Angular 2: Check whether user's browser is compatible


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


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