Angular 11 with Webpack 5 - show message to IE11 users
Question
Our company is migrating one of our frontend projects to Angular 11 with Webpack 5. We are currently on Angular 10, supporting IE11.
The reason for this migration is a shift in priority, one of or webapps needs to be as lightweight and fast as possible. We would therefor want to migrate to Angular 11 with Webpack 5, ditching IE completely, so ES5 is no longer compiled.
The problem is that some of our clients are still using IE11 in their business environment. We already show a message to use modern browsers when we detect IE11, but this message will no longer be shown when going ES2015 only.
Is there a way to show a message for IE11 users to use a different browser, instead of just a blank page, since ES2015 is not supported by IE11?
1 answers
solution1
1 ACCPTED 2021-01-13 03:29:59
I have met this kind of issue before. I detect the browser version and if IE then render some messages you need. If not IE then render the app.
I make a new Angular 11 app and use JavaScript in src/index.html to detect browser, the code is like below:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular11test</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">
function get_browser() {
var ua = navigator.userAgent, tem, M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if (/trident/i.test(M[1])) {
tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
return { name: 'IE', version: (tem[1] || '') };
}
if (M[1] === 'Chrome') {
tem = ua.match(/\bOPR\/(\d+)/)
if (tem != null) { return { name: 'Opera', version: tem[1] }; }
}
if (window.navigator.userAgent.indexOf("Edge") > -1) {
tem = ua.match(/\Edge\/(\d+)/)
if (tem != null) { return { name: 'Edge', version: tem[1] }; }
}
M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
if ((tem = ua.match(/version\/(\d+)/i)) != null) { M.splice(1, 1, tem[1]); }
return {
name: M[0],
version: +M[1]
};
}
var browser = get_browser()
var isSupported = isSupported(browser);
function isSupported(browser) {
var supported = false;
if (browser.name === "Chrome" && browser.version >= 48) {
supported = true;
} else if ((browser.name === "MSIE" || browser.name === "IE") && browser.version <= 11) {
supported = false;
} else if (browser.name === "Edge") {
supported = true;
}
return supported;
}
if (!isSupported) {
//render unsupported message
document.write("<h1>The app is not supported in IE. Please use other browsers!</h1>");
}
else{
//render app
var elem = document.createElement("app-root");
document.body.appendChild(elem);
}
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.