{"id":28360,"date":"2019-07-30T00:00:00","date_gmt":"2019-07-29T22:00:00","guid":{"rendered":"https:\/\/blexin.com\/come-supportare-internet-explorer-in-angular-8\/"},"modified":"2021-05-20T18:54:01","modified_gmt":"2021-05-20T16:54:01","slug":"how-to-support-internet-explorer-in-angular-8","status":"publish","type":"post","link":"https:\/\/blexin.com\/en\/blog-en\/how-to-support-internet-explorer-in-angular-8\/","title":{"rendered":"How to support 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=\"28341\" data-permalink=\"https:\/\/blexin.com\/en\/blog-en\/how-to-support-internet-explorer-in-angular-8\/attachment\/cd5e81d9-ecd3-4b99-98a8-1ca09547842c-2\/\" 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-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-28341\" 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\">For some strange reason, the world has not yet forgotten Internet Explorer. If you\u2019re a front-end developer, this is a very stressful truth, especially if Angular is your favorite front-end framework.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As you probably know, Angular supports Internet Explorer until&nbsp;version 9, but you need to use some \u201cpolyfill\u201d scripts. If you use the CLI, and I hope that you are not starting projects without CLI still, you already have a polyfills.ts in your src folder. This file contains some mandatory polyfills like \u201czone.js\u201d, and some optional imports, commented by default, based on the needs of your project.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the&nbsp;8.x.x release of Angular, the team introduced a new feature named \u201cdifferential loading\u201d, that creates two packages when you build your project: one for the modern browser using the ES2015 syntax with no need of polyfills, and one, larger than the first, that contains polyfills and uses the ES5 syntax to support old browsers.<\/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=\"28344\" data-permalink=\"https:\/\/blexin.com\/en\/blog-en\/how-to-support-internet-explorer-in-angular-8\/attachment\/image01-18-2\/\" 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-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-28344\" 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\">How does this feature work? How the browser chooses the correct bundle? It is simpler than you think: the index.html points all the files and uses the attributes&nbsp;<em>nomodule<\/em>&nbsp;and&nbsp;<em>type=\u201dmodule\u201d<\/em>&nbsp;to understand if the browser support ES modules. All modern browsers only download the scripts with the attribute<em>&nbsp;type=\u201dmodule\u201d<\/em>. Legacy browsers, instead, do not know this attribute and download files with&nbsp;<em>nomodule<\/em>&nbsp;attributes. Actually, some old browsers download all the files, but they only execute the correct ones.<\/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=\"28346\" data-permalink=\"https:\/\/blexin.com\/en\/blog-en\/how-to-support-internet-explorer-in-angular-8\/attachment\/image02-17-2\/\" 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-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-28346\" 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\">This feature works fine with the build command, but with the&nbsp;<em>serve<\/em>,&nbsp;<em>test<\/em>&nbsp;and&nbsp;<em>e2e<\/em>&nbsp;commands, only the es2015 bundles are created. So, if we execute the classic&nbsp;<em>ng serve<\/em>&nbsp;command to test our application in development mode, we can\u2019t test it with Internet Explorer. We can solve this problem changing our tsconfig.json \u201ctarget\u201d property to \u201ces5\u201d instead of \u201ces2015\u201d, but if we want to maintain both the configurations we can add a \u201ctsconfig-es5.app.json\u201d in our root folder with this configuration:<\/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\">Now we can use the angular.json to add a new configuration to our project. In the \u201cbuild\u201d and \u201cserve\u201d sections, we need to add a new \u201ces5\u201d configuration, to specify the new tsconfig created, and the use of it in the \u201cserve\u201d command:<\/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\">We can then run our project in development mode with the command:<\/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\">Is the problem solved therefore? Do we need anything else? It would be wonderful but it\u2019s not so. We still need to test our application on Internet Explorer. If we are on a Windows platform, we can start Internet Explorer and test our application, whereas if we are on a Mac and we have a Parallels license, we can follow the instructions of one of my articles (<a href=\"https:\/\/www.blexin.com\/en-US\/Article\/Blog\/Debugging-Angular-in-Windows-with-Parallels-23%E2%80%9Dtarget=\">Debugging Angular in Windows with Parallels<\/a>) and run the server on Mac, testing the application on a virtualized instance of Windows.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Using the Explorer emulation feature, we can test any old version of the 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=\"28349\" data-permalink=\"https:\/\/blexin.com\/en\/blog-en\/how-to-support-internet-explorer-in-angular-8\/attachment\/image03-15-2\/\" 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-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-28349\" 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\">Let\u2019s take an example. Usually, it can be convenient to use the attribute&nbsp;<em>hidden<\/em>&nbsp;instead of&nbsp;<em>*ngIf<\/em>&nbsp;to hide a piece of HTML, both for functional and for performance reasons. If we want to use a button to show or to hide a DIV element with the&nbsp;<em>hidden<\/em>&nbsp;attribute, we can write this simple code:<\/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\">It works without problems with any modern browser and in IE11, but it doesn&#8217;t on 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=\"28352\" data-permalink=\"https:\/\/blexin.com\/en\/blog-en\/how-to-support-internet-explorer-in-angular-8\/attachment\/image04-13-3\/\" 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-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-28352\" 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\">We need an additional polyfill to add the hidden functionality to IE10, but, to implement it, we need to understand why hidden doesn\u2019t work. If we apply manually the hidden attribute to the HTML element, the piece of the UI hides correctly. The problem is not the attribute hidden, but the Angular binding that doesn\u2019t add the attribute if it doesn&#8217;t exist for the element. So, we need to add \u201chidden\u201d attribute to the HTMLElement of the browser if it doesn\u2019t exist, placing, for example, this code in an hidden-attribute-polyfill.ts and importing it in the main polyfills.ts:<\/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\">Now it works:<\/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=\"28354\" data-permalink=\"https:\/\/blexin.com\/en\/blog-en\/how-to-support-internet-explorer-in-angular-8\/attachment\/image04-1-2-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-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-28354\" 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\">Moral of the story: you always have to test your code, because as a TDD mantra says &#8220;all the code is guilty until proven innocent!&#8221;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can find the sample code here:<\/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 and have a nice summer! See you in September!<\/p>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>Waiting for the new Edge with Chromium, let\u2019s try to understand how to support IE in Angular 8<\/p>\n","protected":false},"author":196716248,"featured_media":28341,"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":"","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,"_wpcom_ai_launchpad_first_post":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"{title}\n\n{excerpt}\n\n{url}","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":[688637524],"tags":[688637390],"class_list":["post-28360","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-en","tag-angular-en"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to support 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\/en\/blog-en\/how-to-support-internet-explorer-in-angular-8\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to support Internet Explorer in Angular 8 - Blexin\" \/>\n<meta property=\"og:description\" content=\"Waiting for the new Edge with Chromium, let\u2019s try to understand how to support IE in Angular 8\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blexin.com\/en\/blog-en\/how-to-support-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-05-20T16:54:01+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=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michele Aponte\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/how-to-support-internet-explorer-in-angular-8\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/how-to-support-internet-explorer-in-angular-8\\\/\"},\"author\":{\"name\":\"Michele Aponte\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#\\\/schema\\\/person\\\/cdc5540c3b6edcacd8d760669e797005\"},\"headline\":\"How to support Internet Explorer in Angular 8\",\"datePublished\":\"2019-07-29T22:00:00+00:00\",\"dateModified\":\"2021-05-20T16:54:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/how-to-support-internet-explorer-in-angular-8\\\/\"},\"wordCount\":741,\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/how-to-support-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\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/how-to-support-internet-explorer-in-angular-8\\\/\",\"url\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/how-to-support-internet-explorer-in-angular-8\\\/\",\"name\":\"How to support Internet Explorer in Angular 8 - Blexin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/how-to-support-internet-explorer-in-angular-8\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/how-to-support-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-05-20T16:54:01+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#\\\/schema\\\/person\\\/cdc5540c3b6edcacd8d760669e797005\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/how-to-support-internet-explorer-in-angular-8\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/how-to-support-internet-explorer-in-angular-8\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/how-to-support-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\\\/en\\\/blog-en\\\/how-to-support-internet-explorer-in-angular-8\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/blexin.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to support Internet Explorer in Angular 8\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/blexin.com\\\/en\\\/\",\"name\":\"Blexin\",\"description\":\"Con noi \u00e8 semplice\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blexin.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#\\\/schema\\\/person\\\/cdc5540c3b6edcacd8d760669e797005\",\"name\":\"Michele Aponte\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@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\\\/en\\\/author\\\/michele-aponteblexin-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to support 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\/en\/blog-en\/how-to-support-internet-explorer-in-angular-8\/","og_locale":"en_US","og_type":"article","og_title":"How to support Internet Explorer in Angular 8 - Blexin","og_description":"Waiting for the new Edge with Chromium, let\u2019s try to understand how to support IE in Angular 8","og_url":"https:\/\/blexin.com\/en\/blog-en\/how-to-support-internet-explorer-in-angular-8\/","og_site_name":"Blexin","article_published_time":"2019-07-29T22:00:00+00:00","article_modified_time":"2021-05-20T16:54:01+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":{"Written by":"Michele Aponte","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blexin.com\/en\/blog-en\/how-to-support-internet-explorer-in-angular-8\/#article","isPartOf":{"@id":"https:\/\/blexin.com\/en\/blog-en\/how-to-support-internet-explorer-in-angular-8\/"},"author":{"name":"Michele Aponte","@id":"https:\/\/blexin.com\/en\/#\/schema\/person\/cdc5540c3b6edcacd8d760669e797005"},"headline":"How to support Internet Explorer in Angular 8","datePublished":"2019-07-29T22:00:00+00:00","dateModified":"2021-05-20T16:54:01+00:00","mainEntityOfPage":{"@id":"https:\/\/blexin.com\/en\/blog-en\/how-to-support-internet-explorer-in-angular-8\/"},"wordCount":741,"image":{"@id":"https:\/\/blexin.com\/en\/blog-en\/how-to-support-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":"en-US"},{"@type":"WebPage","@id":"https:\/\/blexin.com\/en\/blog-en\/how-to-support-internet-explorer-in-angular-8\/","url":"https:\/\/blexin.com\/en\/blog-en\/how-to-support-internet-explorer-in-angular-8\/","name":"How to support Internet Explorer in Angular 8 - Blexin","isPartOf":{"@id":"https:\/\/blexin.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blexin.com\/en\/blog-en\/how-to-support-internet-explorer-in-angular-8\/#primaryimage"},"image":{"@id":"https:\/\/blexin.com\/en\/blog-en\/how-to-support-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-05-20T16:54:01+00:00","author":{"@id":"https:\/\/blexin.com\/en\/#\/schema\/person\/cdc5540c3b6edcacd8d760669e797005"},"breadcrumb":{"@id":"https:\/\/blexin.com\/en\/blog-en\/how-to-support-internet-explorer-in-angular-8\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blexin.com\/en\/blog-en\/how-to-support-internet-explorer-in-angular-8\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blexin.com\/en\/blog-en\/how-to-support-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\/en\/blog-en\/how-to-support-internet-explorer-in-angular-8\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blexin.com\/en\/"},{"@type":"ListItem","position":2,"name":"How to support Internet Explorer in Angular 8"}]},{"@type":"WebSite","@id":"https:\/\/blexin.com\/en\/#website","url":"https:\/\/blexin.com\/en\/","name":"Blexin","description":"Con noi \u00e8 semplice","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blexin.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blexin.com\/en\/#\/schema\/person\/cdc5540c3b6edcacd8d760669e797005","name":"Michele Aponte","image":{"@type":"ImageObject","inLanguage":"en-US","@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\/en\/author\/michele-aponteblexin-com\/"}]}},"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/pcyUBx-7nq","jetpack_sharing_enabled":true,"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","_links":{"self":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts\/28360","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/users\/196716248"}],"replies":[{"embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/comments?post=28360"}],"version-history":[{"count":5,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts\/28360\/revisions"}],"predecessor-version":[{"id":31975,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts\/28360\/revisions\/31975"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/media\/28341"}],"wp:attachment":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/media?parent=28360"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/categories?post=28360"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/tags?post=28360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}