Как остановить выполнение angular и показать сообщение пользователям Intenet Explorer?

Question

У меня есть проект angular 7, я хочу показать пользователям IE сообщение, подобное этому: Your browser is outdated please use chrome or firefox!.

Я могу определить браузер по следующему коду:

       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!"); 
        }

Этот скрипт находится в файле index.html в элементе <app-root></app-root>.Теперь, как прекратить angular от разбора <app-root> и показать сообщение в теле документа?

Answer 1

Вы можете применить свою логику в пределах main.ts.Это начальный файл углового приложения, и вы можете предотвратить загрузку angular.Взгляните на это блиц

Сначала я вставил фрагмент HTML в index.html

<div id="ie-message" style="display: none">This is IE message</div>

Затем я просто скопировал ваш код в 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));
}