{"id":28339,"date":"2019-07-30T00:00:00","date_gmt":"2019-07-29T22:00:00","guid":{"rendered":"https:\/\/blexin.com\/?p=28339"},"modified":"2021-01-13T09:40:29","modified_gmt":"2021-01-13T08:40:29","slug":"come-supportare-internet-explorer-in-angular-8","status":"publish","type":"post","link":"https:\/\/blexin.com\/it\/blog\/come-supportare-internet-explorer-in-angular-8\/","title":{"rendered":"Come supportare Internet Explorer in Angular 8"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"608\" data-attachment-id=\"28340\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/come-supportare-internet-explorer-in-angular-8\/attachment\/cd5e81d9-ecd3-4b99-98a8-1ca09547842c\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/cd5e81d9-ecd3-4b99-98a8-1ca09547842c.png?fit=1024%2C608&amp;ssl=1\" data-orig-size=\"1024,608\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"cd5e81d9-ecd3-4b99-98a8-1ca09547842c\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/cd5e81d9-ecd3-4b99-98a8-1ca09547842c.png?fit=1024%2C608&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/cd5e81d9-ecd3-4b99-98a8-1ca09547842c.png?resize=1024%2C608&#038;ssl=1\" alt=\"\" class=\"wp-image-28340\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/cd5e81d9-ecd3-4b99-98a8-1ca09547842c.png 1024w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/cd5e81d9-ecd3-4b99-98a8-1ca09547842c-980x582.png 980w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/cd5e81d9-ecd3-4b99-98a8-1ca09547842c-480x285.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Per qualche strana ragione, il mondo non ha ancora dimenticato Internet Explorer. Se siete sviluppatori front-end, questa \u00e8 una realt\u00e0 davvero stressante, specialmente se Angular \u00e8 il vostro framework di front-end preferito.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Come probabilmente gi\u00e0 sapete, Angular supporta Internet Explorer fino alla versione 9, ma bisogna usare alcuni script \u201cpolyfill\u201d. Se usate la CLI, e spero che non stiate ancora creando nuovi progetti senza la CLI, avete gi\u00e0 il polyfills.ts nella vostra cartella src. Questo file contiene alcuni polyfill obbligatori, come \u201czone.js\u201d e altri import opzionali, commentati di default, sulla base delle necessit\u00e0 del vostro progetto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nell\u2019ultima major release (8.x.x) di Angular, il team ha introdotto una nuova feature, chiamata \u201cdifferential loading\u201d che crea due pacchetti quando buildate il vostro progetto: uno per i browser moderni, usando la sintassi ES2015 senza polyfills, e un altro, pi\u00f9 grande del primo, che contiene i polyfill e usa la sintassi ES5 per supportare i vecchi browser.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"330\" data-attachment-id=\"28343\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/come-supportare-internet-explorer-in-angular-8\/attachment\/image01-18\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image01-18.png?fit=1110%2C358&amp;ssl=1\" data-orig-size=\"1110,358\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image01-18\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image01-18.png?fit=1024%2C330&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image01-18.png?resize=1024%2C330&#038;ssl=1\" alt=\"\" class=\"wp-image-28343\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/image01-18-1024x330.png 1024w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/image01-18-980x316.png 980w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/image01-18-480x155.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Come funziona questa feature? Come fa il browser a scegliere il pacchetto corretto? \u00c8 pi\u00f9 semplice di quanto si pensi: index.html punta tutti i file e usa gli attributi\u00a0<em>nomodule<\/em>\u00a0e\u00a0<em>type=\u201dmodule\u201d<\/em>\u00a0per capire se il browser supporta i moduli ES. Tutti i browser moderni scaricano solo gli script con l&#8217;attributo\u00a0<em>type=\u201dmodule\u201d,<\/em>\u00a0mentre quelli legacy non conoscono questo attributo e scaricano i file con l\u2019attributo\u00a0<em>nomodule<\/em>. A dire il vero, alcuni browser meno recenti scaricano tutti i file, ma eseguono solo quelli corretti.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"945\" height=\"601\" data-attachment-id=\"28345\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/come-supportare-internet-explorer-in-angular-8\/attachment\/image02-17\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image02-17.png?fit=945%2C601&amp;ssl=1\" data-orig-size=\"945,601\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image02-17\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image02-17.png?fit=945%2C601&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image02-17.png?resize=945%2C601&#038;ssl=1\" alt=\"\" class=\"wp-image-28345\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/image02-17.png 945w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/image02-17-480x305.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 945px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Questa feature funziona perfettamente con il comando build, ma con i comandi\u00a0<em>serve<\/em>,\u00a0<em>test<\/em>\u00a0e\u00a0<em>e2e<\/em>, vengono creati solo i bundle es2015. Quindi, se eseguiamo il classico comando\u00a0<em>ng serve<\/em>, per testare la nostra applicazione in modalit\u00e0 di sviluppo, non possiamo farlo con Internet Explorer. Possiamo risolvere questo problema modificando la propriet\u00e0 \u201ctarget\u201d del nostro tsconfig.json su \u201ces5\u201d anzich\u00e9 \u201ces2015\u201d, ma se vogliamo mantenere entrambe le configurazioni, possiamo aggiungere un \u201ctsconfig-es5.app.json\u201d nella cartella principale con questa configurazione:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n{\n\u00a0&quot;extends&quot;: &quot;.\/tsconfig.app.json&quot;,\n\u00a0&quot;compilerOptions&quot;: {\n\u00a0\u00a0\u00a0&quot;target&quot;: &quot;es5&quot;\n\u00a0}\n}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Ora possiamo usare l\u2019angular.json per aggiungere una nuova configurazione al nostro progetto. Nelle sezioni &#8220;build&#8221; e &#8220;serve&#8221;, dobbiamo aggiungere una nuova configurazione &#8220;es5&#8221;, per specificare il nuovo tsconfig creato e il suo utilizzo nel comando &#8220;serve&#8221;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n&quot;build&quot;: {\n\u00a0\u00a0\u00a0\u00a0&quot;builder&quot;: &quot;@angular-devkit\/build-angular:browser&quot;,\n\u00a0\u00a0\u00a0\u00a0&quot;options&quot;: { ...\n\u00a0\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0\u00a0&quot;configurations&quot;: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&quot;production&quot;: { ...\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&quot;es5&quot;: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&quot;tsConfig&quot;: &quot;.\/tsconfig-es5.app.json&quot;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0}\n},\n&quot;serve&quot;: {\n\u00a0\u00a0\u00a0\u00a0&quot;builder&quot;: &quot;@angular-devkit\/build-angular:dev-server&quot;,\n\u00a0\u00a0\u00a0\u00a0&quot;options&quot;: { ...\n\u00a0\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0\u00a0&quot;configurations&quot;: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&quot;production&quot;: { ...\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&quot;es5&quot;: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&quot;browserTarget&quot;: &quot;IEdemo:build:es5&quot;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0}\n}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Adesso possiamo eseguire il nostro progetto in modalit\u00e0 di sviluppo con il comando:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nng serve --configuration es5\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Quindi&nbsp;il problema \u00e8 risolto? Non abbiamo bisogno di nient\u2019altro? Sarebbe meraviglioso ma non \u00e8 cos\u00ec. Dobbiamo comunque testare la nostra applicazione su Internet Explorer. Se siamo su piattaforma Windows, possiamo avviare Internet Explorer e testare la nostra applicazione, mentre se ci troviamo su un Mac e abbiamo una licenza di Parallels, possiamo seguire le istruzioni di uno dei miei articoli (<a href=\"https:\/\/www.blexin.com\/it-IT\/Article\/Blog\/Debuggare-Angular-in-Windows-con-Parallels-23\" target=\"_blank\" rel=\"noreferrer noopener\">Debuggare Angular in Windows con Parallels<\/a>) ed eseguire il server su Mac, testando l&#8217;applicazione su un&#8217;istanza virtualizzata di Windows.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Usando l\u2019emulazione di Explorer, possiamo testare qualsiasi vecchia versione del browser:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"729\" data-attachment-id=\"28348\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/come-supportare-internet-explorer-in-angular-8\/attachment\/image03-15\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image03-15.png?fit=1099%2C782&amp;ssl=1\" data-orig-size=\"1099,782\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image03-15\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image03-15.png?fit=1024%2C729&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image03-15.png?resize=1024%2C729&#038;ssl=1\" alt=\"\" class=\"wp-image-28348\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/image03-15-1024x729.png 1024w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/image03-15-980x697.png 980w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/image03-15-480x342.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Facciamo un esempio. Spesso pu\u00f2 essere utile utilizzare l&#8217;attributo\u00a0<em>hidden<\/em>\u00a0invece di\u00a0<em>*ngIf<\/em>\u00a0per nascondere un pezzo di HTML, sia per motivi funzionali che di prestazioni. Se vogliamo usare un pulsante per mostrare o nascondere un elemento DIV con l&#8217;attributo\u00a0<em>hidden<\/em>, possiamo scrivere questo semplice codice:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;button (click)=&quot;elementVisible = !elementVisible&quot;&gt;\n\u00a0Show\/hide\n&lt;\/button&gt;\n&lt;div &#x5B;hidden]=&quot;elementVisible&quot;&gt;\n\u00a0&lt;h1&gt;\n\u00a0\u00a0\u00a0Welcome to {{ title }}!\n\u00a0&lt;\/h1&gt;\n&lt;\/div&gt;\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Questo funziona senza problemi con qualsiasi browser moderno e in IE11, ma non con IE10.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"676\" data-attachment-id=\"28351\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/come-supportare-internet-explorer-in-angular-8\/attachment\/image04-13\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image04.gif?fit=1099%2C725&amp;ssl=1\" data-orig-size=\"1099,725\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image04\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image04.gif?fit=1024%2C676&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image04.gif?resize=1024%2C676&#038;ssl=1\" alt=\"\" class=\"wp-image-28351\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/image04-1024x676.gif 1024w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/image04-980x646.gif 980w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/image04-480x317.gif 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Abbiamo bisogno di un polyfill aggiuntivo per aggiungere la funzionalit\u00e0 hidden a IE10, ma, per implementarla, dobbiamo capire qual \u00e8 il problema. Se applichiamo manualmente l&#8217;attributo nascosto all&#8217;elemento HTML, il pezzo dell&#8217;interfaccia utente viene nascosto correttamente. Il problema non \u00e8 l&#8217;attributo hidden, ma il binding di Angular che non aggiunge l&#8217;attributo se non esiste per l&#8217;elemento. Quindi, dobbiamo aggiungere l&#8217;attributo &#8220;hidden&#8221; agli HTMLElement del browser quando non esistono, inserendo, ad esempio, questo codice in un hidden-attribute-polyfill.ts e importandolo nel polyfills.ts principale:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n((global: any) =&gt; {\n\u00a0&#039;use strict&#039;;\n\u00a0\n\u00a0const notInBrowser = !global.HTMLElement || !HTMLElement.prototype;\n\u00a0const alreadyDefined = &#039;hidden&#039; in HTMLElement.prototype;\n\u00a0const notPossibleToImplement = typeof Object.defineProperty === &#039;undefined&#039;;\n\u00a0\n\u00a0if (notInBrowser || alreadyDefined || notPossibleToImplement) {\n\u00a0\u00a0\u00a0return;\n\u00a0}\n\u00a0\n\u00a0Object.defineProperty(HTMLElement.prototype, &#039;hidden&#039;, {\n\u00a0\u00a0\u00a0get() {\n\u00a0\u00a0\u00a0\u00a0\u00a0return this.hasAttribute(&#039;hidden&#039;);\n\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0set(value) {\n\u00a0\u00a0\u00a0\u00a0\u00a0if (value) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.setAttribute(&#039;hidden&#039;, &#039;&#039;);\n\u00a0\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.removeAttribute(&#039;hidden&#039;);\n\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0return value;\n\u00a0\u00a0\u00a0},\n\u00a0});\n})(typeof window === &#039;undefined&#039; ? this : window);\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Adesso funziona:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"676\" data-attachment-id=\"28353\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/come-supportare-internet-explorer-in-angular-8\/attachment\/image04-1-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image04-1.gif?fit=1099%2C725&amp;ssl=1\" data-orig-size=\"1099,725\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image04-1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image04-1.gif?fit=1024%2C676&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image04-1.gif?resize=1024%2C676&#038;ssl=1\" alt=\"\" class=\"wp-image-28353\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/image04-1-1024x676.gif 1024w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/image04-1-980x646.gif 980w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/image04-1-480x317.gif 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Morale della favola: bisogna sempre testare il proprio codice perch\u00e9, come dice un mantra TDD, &#8220;tutto il codice \u00e8 colpevole fino a prova contraria!&#8221;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Trovate il codice di esempio qui:&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/github.com\/apomic80\/angular8-and-internet-explorer\">https:\/\/github.com\/apomic80\/angular8-and-internet-explorer<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Happy coding e buona estate! Ci vediamo a settembre!<\/p>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>Aspettando il nuovo Edge con Chromium, cerchiamo di capire come supportare IE in Angular 8<\/p>\n","protected":false},"author":196716248,"featured_media":28340,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","_crdt_document":"","inline_featured_image":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_wpas_customize_per_network":false,"jetpack_post_was_ever_published":false},"categories":[688637374],"tags":[688637387],"class_list":["post-28339","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-angular"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Come supportare Internet Explorer in Angular 8 - Blexin<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blexin.com\/it\/blog\/come-supportare-internet-explorer-in-angular-8\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come supportare Internet Explorer in Angular 8 - Blexin\" \/>\n<meta property=\"og:description\" content=\"Aspettando il nuovo Edge con Chromium, cerchiamo di capire come supportare IE in Angular 8\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blexin.com\/it\/blog\/come-supportare-internet-explorer-in-angular-8\/\" \/>\n<meta property=\"og:site_name\" content=\"Blexin\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-29T22:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-13T08:40:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i1.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/cd5e81d9-ecd3-4b99-98a8-1ca09547842c.png?fit=1024%2C608&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"608\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Michele Aponte\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michele Aponte\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/come-supportare-internet-explorer-in-angular-8\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/come-supportare-internet-explorer-in-angular-8\\\/\"},\"author\":{\"name\":\"Michele Aponte\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/cdc5540c3b6edcacd8d760669e797005\"},\"headline\":\"Come supportare Internet Explorer in Angular 8\",\"datePublished\":\"2019-07-29T22:00:00+00:00\",\"dateModified\":\"2021-01-13T08:40:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/come-supportare-internet-explorer-in-angular-8\\\/\"},\"wordCount\":671,\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/come-supportare-internet-explorer-in-angular-8\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/cd5e81d9-ecd3-4b99-98a8-1ca09547842c.png?fit=1024%2C608&ssl=1\",\"keywords\":[\"Angular\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"it-IT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/come-supportare-internet-explorer-in-angular-8\\\/\",\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/come-supportare-internet-explorer-in-angular-8\\\/\",\"name\":\"Come supportare Internet Explorer in Angular 8 - Blexin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/come-supportare-internet-explorer-in-angular-8\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/come-supportare-internet-explorer-in-angular-8\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/cd5e81d9-ecd3-4b99-98a8-1ca09547842c.png?fit=1024%2C608&ssl=1\",\"datePublished\":\"2019-07-29T22:00:00+00:00\",\"dateModified\":\"2021-01-13T08:40:29+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/cdc5540c3b6edcacd8d760669e797005\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/come-supportare-internet-explorer-in-angular-8\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/come-supportare-internet-explorer-in-angular-8\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/come-supportare-internet-explorer-in-angular-8\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/cd5e81d9-ecd3-4b99-98a8-1ca09547842c.png?fit=1024%2C608&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/cd5e81d9-ecd3-4b99-98a8-1ca09547842c.png?fit=1024%2C608&ssl=1\",\"width\":1024,\"height\":608},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/come-supportare-internet-explorer-in-angular-8\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/blexin.com\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Come supportare Internet Explorer in Angular 8\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#website\",\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/\",\"name\":\"Blexin\",\"description\":\"Con noi \u00e8 semplice\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blexin.com\\\/it\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/cdc5540c3b6edcacd8d760669e797005\",\"name\":\"Michele Aponte\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/32138aff568f2063b34d27a23cef27e09f3159bfcadea5ea05599c499cf4342f?s=96&d=identicon&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/32138aff568f2063b34d27a23cef27e09f3159bfcadea5ea05599c499cf4342f?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/32138aff568f2063b34d27a23cef27e09f3159bfcadea5ea05599c499cf4342f?s=96&d=identicon&r=g\",\"caption\":\"Michele Aponte\"},\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/author\\\/michele-aponteblexin-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Come supportare Internet Explorer in Angular 8 - Blexin","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blexin.com\/it\/blog\/come-supportare-internet-explorer-in-angular-8\/","og_locale":"it_IT","og_type":"article","og_title":"Come supportare Internet Explorer in Angular 8 - Blexin","og_description":"Aspettando il nuovo Edge con Chromium, cerchiamo di capire come supportare IE in Angular 8","og_url":"https:\/\/blexin.com\/it\/blog\/come-supportare-internet-explorer-in-angular-8\/","og_site_name":"Blexin","article_published_time":"2019-07-29T22:00:00+00:00","article_modified_time":"2021-01-13T08:40:29+00:00","og_image":[{"width":1024,"height":608,"url":"https:\/\/i1.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/cd5e81d9-ecd3-4b99-98a8-1ca09547842c.png?fit=1024%2C608&ssl=1","type":"image\/png"}],"author":"Michele Aponte","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Michele Aponte","Tempo di lettura stimato":"4 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blexin.com\/it\/blog\/come-supportare-internet-explorer-in-angular-8\/#article","isPartOf":{"@id":"https:\/\/blexin.com\/it\/blog\/come-supportare-internet-explorer-in-angular-8\/"},"author":{"name":"Michele Aponte","@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/cdc5540c3b6edcacd8d760669e797005"},"headline":"Come supportare Internet Explorer in Angular 8","datePublished":"2019-07-29T22:00:00+00:00","dateModified":"2021-01-13T08:40:29+00:00","mainEntityOfPage":{"@id":"https:\/\/blexin.com\/it\/blog\/come-supportare-internet-explorer-in-angular-8\/"},"wordCount":671,"image":{"@id":"https:\/\/blexin.com\/it\/blog\/come-supportare-internet-explorer-in-angular-8\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/cd5e81d9-ecd3-4b99-98a8-1ca09547842c.png?fit=1024%2C608&ssl=1","keywords":["Angular"],"articleSection":["Blog"],"inLanguage":"it-IT"},{"@type":"WebPage","@id":"https:\/\/blexin.com\/it\/blog\/come-supportare-internet-explorer-in-angular-8\/","url":"https:\/\/blexin.com\/it\/blog\/come-supportare-internet-explorer-in-angular-8\/","name":"Come supportare Internet Explorer in Angular 8 - Blexin","isPartOf":{"@id":"https:\/\/blexin.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blexin.com\/it\/blog\/come-supportare-internet-explorer-in-angular-8\/#primaryimage"},"image":{"@id":"https:\/\/blexin.com\/it\/blog\/come-supportare-internet-explorer-in-angular-8\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/cd5e81d9-ecd3-4b99-98a8-1ca09547842c.png?fit=1024%2C608&ssl=1","datePublished":"2019-07-29T22:00:00+00:00","dateModified":"2021-01-13T08:40:29+00:00","author":{"@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/cdc5540c3b6edcacd8d760669e797005"},"breadcrumb":{"@id":"https:\/\/blexin.com\/it\/blog\/come-supportare-internet-explorer-in-angular-8\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blexin.com\/it\/blog\/come-supportare-internet-explorer-in-angular-8\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/blexin.com\/it\/blog\/come-supportare-internet-explorer-in-angular-8\/#primaryimage","url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/cd5e81d9-ecd3-4b99-98a8-1ca09547842c.png?fit=1024%2C608&ssl=1","contentUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/cd5e81d9-ecd3-4b99-98a8-1ca09547842c.png?fit=1024%2C608&ssl=1","width":1024,"height":608},{"@type":"BreadcrumbList","@id":"https:\/\/blexin.com\/it\/blog\/come-supportare-internet-explorer-in-angular-8\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blexin.com\/it\/"},{"@type":"ListItem","position":2,"name":"Come supportare Internet Explorer in Angular 8"}]},{"@type":"WebSite","@id":"https:\/\/blexin.com\/it\/#website","url":"https:\/\/blexin.com\/it\/","name":"Blexin","description":"Con noi \u00e8 semplice","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blexin.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Person","@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/cdc5540c3b6edcacd8d760669e797005","name":"Michele Aponte","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/32138aff568f2063b34d27a23cef27e09f3159bfcadea5ea05599c499cf4342f?s=96&d=identicon&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/32138aff568f2063b34d27a23cef27e09f3159bfcadea5ea05599c499cf4342f?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/32138aff568f2063b34d27a23cef27e09f3159bfcadea5ea05599c499cf4342f?s=96&d=identicon&r=g","caption":"Michele Aponte"},"url":"https:\/\/blexin.com\/it\/author\/michele-aponteblexin-com\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/cd5e81d9-ecd3-4b99-98a8-1ca09547842c.png?fit=1024%2C608&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pcyUBx-7n5","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/28339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/users\/196716248"}],"replies":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/comments?post=28339"}],"version-history":[{"count":7,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/28339\/revisions"}],"predecessor-version":[{"id":28359,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/28339\/revisions\/28359"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/media\/28340"}],"wp:attachment":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/media?parent=28339"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/categories?post=28339"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/tags?post=28339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}