Stack Exchange
How to stop execution of angular and show a message to Intenet Explorer users?
I have an angular 7 project, I want to show IE users a message like this: Your browser is outdated please use chrome or firefox!. 
I can detect the browser by following code: 
       var browser = (function(agent){
          switch(true){
            case agent.indexOf("edge") > -1: return "edge";
            case agent.indexOf("opr") > -1 && !!window.opr: return "opera";
            case agent.indexOf("chrome") > -1 && !!window.chrome: return "chrome";
            case agent.indexOf("trident") > -1: return "ie";
            case agent.indexOf("firefox") > -1: return "firefox";
            case agent.indexOf("safari") > -1: return "safari";
            default: return "other";
          }
        })(window.navigator.userAgent.toLowerCase());
        console.log(browser)

        if(browser === 'ie'){
          alert("IE detected!"); 
        }

This script is placed in the index.html file under <app-root></app-root> element. Now how to stop angular from parsing  <app-root> and show a message in the document body? 

Why not just add the IE polyfills?

@AdrianBrand I am using angular flex layout and it is not supporting IE

IE 11 supports flex

Yea but I spent an entire day to make angular flex layout work with IE with no chance.  anyway I am not interested in IE :)))

You can apply your logic within main.ts. This is the starting file of an angular app and you can prevent angular from bootstrapping. Take a look at this blitz
First I put a piece of HTML into index.html
<div id="ie-message" style="display: none">This is IE message</div>

Next, I just copied your code into main.ts
var browser = (function(agent){
  switch(true){
    case agent.indexOf("edge") > -1: return "edge";
    case agent.indexOf("opr") > -1 && !!window.opr: return "opera";
    case agent.indexOf("chrome") > -1 && !!window.chrome: return "chrome";
    case agent.indexOf("trident") > -1: return "ie";
    case agent.indexOf("firefox") > -1: return "firefox";
    case agent.indexOf("safari") > -1: return "safari";
    default: return "other";
  }
})(window.navigator.userAgent.toLowerCase());
console.log(browser);

if(browser === 'ie'){
  // if the browser is IE, remove "display: none" from IE message template
  document.getElementById('ie-message').style.display = 'block';
} else {
  platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
  // Ensure Angular destroys itself on hot reloads.
  if (window['ngRef']) {
    window['ngRef'].destroy();
  }
  window['ngRef'] = ref;

  // Otherwise, log the boot error
  }).catch(err => console.error(err));
}



Thank you Bunyamin! where can I put a message to Html body?

@AhmadMobaraki I've updated my answer and check the new stackblitz

One question! do I have to use this line: import './polyfills';?  in main.ts

It is angular default, I suggest you keep it and comment out anything that you don't need in polyfills.ts @AhmadMobaraki

I do not need it, but when I comment out this line, IE browser shows and error in console : SCRIPT5022: SecurityError polyfills.ts (80,4)

I suggest you keep it and check out angular differential loading @AhmadMobaraki
