IE document mode is set to 7 when browsing to angular site

Question

Whenever I browse to my angular 6 site through IE, the document mode is set to IE7. My Compatibility mode settings are: Display intranet sites in compatibility mode - checked Use Microsoft compatibility lists - unchecked. No site in the Websites you've added to compatibility View.

My polyfills.ts is configured to be set to >=IE10. Here is my poyfills.ts:

    /**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
import 'classlist.js'
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'core-js/es7/array';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
 import 'core-js/es6/reflect';


/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';


/**
 * Web Animations `@angular/platform-browser/animations`
 * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
 * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
 **/
// import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/**
 * By default, zone.js will patch all possible macroTask and DomEvents
 * user can disable parts of macroTask/DomEvents patch by setting following flags
 */

 // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
 // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
 // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames

 /*
 * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
 * with the following flag, it will bypass `zone.js` patch for IE/Edge
 */
// (window as any).__Zone_enable_cross_context_check = true;

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.



/***************************************************************************************************
 * APPLICATION IMPORTS
 */

Answer 1

Try to add line below in your site may help to fix the issue for IE browser.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

If possible for you than you can also try to set HTTP Response Headers as X-UA-Compatible Value: IE=edge on server side.

If issue persist than try to provide more information about the issue. Here I am assuming that you are using IE 11.

Answer 2

You didn't mention which IE version you're using or how you're viewing your Angular site, e.g. is it located on your local machine or the intranet? This affects the zone used to present your page and, as a result, may impact the document mode used to render your work. (I'll assume you're using IE11. If you're on an earlier version, you may need to adjust the steps below.)

To verify the zone used to serve your page, right-click a static portion of the page, choose Properties, and then check the value of the Zone: setting (about halfway down the property sheet).

If the zone is Intranet (meaning the site is served from your local hard drive or network), that's likely the cause of your problem. By default, IE displays Intranet pages in Compatibility View.

If the zone is Internet, then you have a different problem. Perhaps you're not using the HTML5 doctype (<!DOCTYPE html>) or another configuration setting is forcing your site into a legacy document mode.

If the site is being forced into legacy document mode, your best bet is to use IE's developer tools to view the current document mode. To do so, press [F12], select the Emulation tab, and then check the value of the Document mode drop down. If that's not 11, then something is definitely interfering.

Precisely what is hard to say because there are a number of ways to control things. The line from Deepak's answer can help, but only if it's placed in the <HEAD> section above everything other than <TITLE>.

If you find yourself in this situation, check for related SO threads that talk about IE's document mode. Possibilities include: server site headers (e.g. .htaccess), group policy updates, registry setting changes, and more.

Alternatively, since IE is formally no longer being updated, you could, y'know, let it go. Assuming that you're designing your site so that it's also functional for screen readers and other uncommon browsing conditions, you could simply lump IE support in that same bucket.