0
415
VistasCómo mostrar Internet Explorer no compatible en angular sin importar pollyfills
Con IE oficialmente en desuso en Angular 12, quiero mostrar una advertencia estática en mi página para notificar al usuario que cambie a un navegador compatible.
Estoy usando un fragmento simple como este en index.html para agregar una clase css al cuerpo, cuando luego muestra un elemento div.
<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; }Pero recibo errores en Internet Explorer, que runtime.js, polyfills.js, vendor.js y main.js no se ejecutarán. Supongo que es debido a la falta de polyfills y la configuración de destino de tsconfig, que estos no se ejecutarán.
¿Hay alguna manera de "evitar" que angular inserte o ejecute estas etiquetas de script en primer lugar? Intenté eliminarlos en mi bloque if (msie > 0) , pero eso no funciona.
setTimeout(() => { const x = document.body.querySelectorAll('script[defer]'); x.forEach((i) => document.body.removeChild(i)); });Mi objetivo es lograr esto sin tener que ajustar la configuración de polyfill y tsconfig, para mantener el tamaño de compilación al mínimo.
1 Respuestas
Responde la pregunta0
Los errores que se muestran en IE se deben a que los scripts aún se cargan en IE. Si no desea ver los errores en IE, puede cargar una página html no compatible cuando el navegador es IE.
Además, parece que hay algunos problemas en la detección del código IE. Hice algunos cambios, y puede consultar mis pasos a continuación, lo pruebo y funciona bien:
Agregue un archivo unsupported.html en la raíz de la carpeta src . Ejemplo de archivo unsupported.html :
<!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>Agregue
"src/unsupported.html"en la propiedad deassetsangular.json . Por ejemplo:"assets": [ "src/favicon.ico", "src/assets", "src/unsupported.html" ],Detecte el navegador en src/index.html , si es IE, redirija a unsupported.html , si no, renderice
<app-root>. El código es como a continuación:<!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>