0
416
ViewsHow to display Internet explorer not supported in angular without importing pollyfills
With IE officially deprecated in Angular 12, I want to display a static warning in my page to notify the user to switch to a supported browser.
I'm using a simple snippet like this in the index.html to append a css class to the body, when then displays a div element.
<body class="mat-typography">
<script>
(function msieversion() {
const ua = window.navigator.userAgent;
const msie = ua.indexOf('MSIE ');
if (msie > 0) {
document.body.classList.add('is-internet-explorer');
}
})();
</script>
<div class="ie">isIE</div>
<app-root></app-root>
</body>
.is-internet-explorer {
.ie {
display: flex;
}
app-root{
display: none;
}
}
.ie {
display: none;
}
But I'm getting errors in internet explorer, that runtime.js, polyfills.js, vendor.js and main.js wont run. I assume it is because of missing polyfills and the tsconfig target setting, that these won't run.
Is there a way to "prevent" angular from inserting or executing these script tags in the first place? I've tried to remove them in my if (msie > 0) block, but that doesn't work.
setTimeout(() => {
const x = document.body.querySelectorAll('script[defer]');
x.forEach((i) => document.body.removeChild(i));
});
My goal is to accomplish this without having to adjust polyfill and tsconfig settings, to keep the build size to a mininum.
1 answers
Answer question0
The errors shown in IE are due to the scripts still loading in IE. If you don't want to see the errors in IE, you can load an unsupported html page when the browser is IE.
Also, it seems that there are some problems in IE code detection. I made some changes, and you can refer to my steps below, I test it and it works fine:
Add an unsupported.html file at the root of the src folder. Example of unsupported.html file:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <body> <h1>The app is not supported in IE. Please use other browsers!</h1> </body> </html>Add
"src/unsupported.html"in the angular.jsonassetsproperty. For example:"assets": [ "src/favicon.ico", "src/assets", "src/unsupported.html" ],Detect the browser in src/index.html , if it's IE redirect to unsupported.html , if not render
<app-root>. The code is like below:<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>MyApp</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <script type="text/javascript"> var msie = /msie\s|trident/i.test(window.navigator.userAgent); if (msie) { //IE, redirect page window.location.href = "./unsupported.html"; } else { //render app var elem = document.createElement("app-root"); document.body.appendChild(elem); } </script> </body> </html>