0

I would like to know whether there is a way I can restrict the user to open my Angular 4 app on IE (any version).

Any help is appreciated.

Sunit S
  • 65
  • 1
  • 9
  • Do you mean to only allow IE users access, or block IE users? – Dai Oct 27 '17 at 04:00
  • Please explain why you want to discriminate by browser. IE11 is still a major browser with significant market share - any reason you can't have workarounds for any bugs it introduces? – Dai Oct 27 '17 at 04:01
  • https://stackoverflow.com/questions/38790150/browser-detection-using-angular – Philip Brack Oct 27 '17 at 04:03
  • @Dai - I intend to not allow the users to access my app on IE. Also, regarding your second comment, the issue is that there are multiple apps hyper-linked to my app and these apps run on IE version 7 as they are built on some old technology (Flex) and the IE 'Compatibility View Settings' are checked to 'display intranet sites in compatibility mode', hence, when i run my app on IE, it automatically changes to IE 7 environment where my app breaks down as my app is also hosted in the office network. I can't expect the user to be switching between modes, so I will restrict it on IE. – Sunit S Oct 27 '17 at 04:06
  • @PhilipBrack - The solution is for AngularJS, whereas I require solution for Angular. – Sunit S Oct 27 '17 at 04:08
  • thank you guys for your time. I got it working by using 'navigator.userAgent'. – Sunit S Oct 27 '17 at 04:27

1 Answers1

0

@Sunit be warned, I am new at this.

There are definite pitfalls with doing browser detection that requires wide nets to allow for browser versioning and platforms. With that said, if you are determined to continue, there is a really good answer from @RodW on options and pitfalls of browser detection here:

How to detect Safari, Chrome, IE, Firefox and Opera browser?

Using Rob's approach in your bootstrap component, determine browser and your load decision. Once you have determined whether to load or not, you have many options like template alternatives, apply route gaurds, etc. I reco going with a simple template approach where you provide user feedback.

<ng-container *ngIf="blockAccess">
  <h1>The current browser cannot run this app.
  
  <p>Please consider one of the approved.....</p>
<ng-container>

<ng-container *ngIf="!blockAccess">
  <router-outlet></router-outlet>
<ng-container>

Outside of this, I found this really interesting and I think it is the way to go. Feature detection to determine if your apps can run. The moz spec it pretty detailed and helpful:

https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection

Bob Kadadia
  • 11
  • 1