CODEWITHSUNDEEP
angularinternet-explorerangular-material
bhowden
bhowden

Reputation: 670

Running an Angular 8 app on Internet Explorer 10, 11

I am having a lot of trouble getting my Angular 8 app to show on Internet Explorer 10 and 11. Currently it just loads a blank white page with an empty component. I have followed giudes online and stackoverflow answers like this one

screenshot ie11 browserstack

But the page is still blank. Here is my configurations files:

tsconfig.es5.json

{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "target": "es5"
  }
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "AppName": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/AppName",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              {
                "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
              },
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            },
            "es5": {
              "tsConfig": "./tsconfig.es5.json"
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "AppName:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "AppName:build:production"
            },
            "es5": {
              "browserTarget": "AppName:build:es5"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "AppName:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "AppName:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "AppName:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "AppName"
}

polyfills.js

/**
 * 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/guide/browser-support
 */

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

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

/* Evergreen browsers require these. */
import 'core-js/es6/reflect';

/* IE10 and IE11 requires the following to support `@angular/animation`. ALL Firefox browsers require the following to support `@angular/animation`. */
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

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

/***************************************************************************************************
 * APPLICATION IMPORTS
 * You can include your own polyfills here (e.g. CSS custom properties).
 */

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';

And here is the generated index file

<!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>AppName</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>
    <app-root></app-root>
    <script src="runtime.js"></script>
    <script src="polyfills-es5.js" nomodule></script>
    <script src="polyfills.js"></script>
    <script src="styles.js"></script>
    <script src="vendor.js"></script><script src="main.js"></script>
    </body>
    </html>

browserlist

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# You can see what browsers were selected by your queries by running:
#   npx browserslist

> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11 # For IE 9-11 support, remove 'not'.

Here is the output from npx browserlist

npx browserslist
and_chr 75
and_ff 67
and_qq 1.2
and_uc 11.8
android 67
baidu 7.12
chrome 75
chrome 74
chrome 73
chrome 72
edge 18
edge 17
firefox 67
firefox 66
firefox 60
ie 11
ie 10
ie 9
ie_mob 11
ios_saf 12.2
ios_saf 12.0-12.1
ios_saf 11.3-11.4
kaios 2.5
op_mini all
op_mob 46
opera 58
opera 57
safari 12.1
safari 12
safari 5.1
samsung 9.2
samsung 8.2
samsung 4

Works great in modern browsers but we need to support IE 10 and 11. I'm also using the latest angular material if that makes a difference. I have tried 

ng build

and 

ng build --configration="es5"

Any help is greatly appreciated.

Thanks

UPDATE:

ng serve --configutation=es5

loads the page in IE!!

The dist produced by ng build does not.

Upvotes: 1

Views: 2274

Answers (2)

Hoang Subin
Hoang Subin

Reputation: 7400

I got a lot of issue like this both on Chrome and Safari. Not only IE. So, I have some suggestions for you since your code look like nothing wrong.

  1. Make sure that base href is right. Because, sometimes we deploy to dev server and the url like xx.xxx.xx.xxx:1024/your-frontend/. This mean that you have to add your-frontend as a base href to your angular.json or from build command line.

    How to check this?

    You watch your network and notice that your script and assets fail on loading.

  2. Sometimes because polyfill issue. Maybe not from your project. it derives from your library in node_modules. Last time, I cannot run my angular project on IE since I use ngxs as state management and it is not working on IE.

    Then, I have to add something like this to my polyfills.ts to support ngxs

    if (!Object.entries) {
    Object.entries = function (obj) {
        var ownProps = Object.keys(obj),
            i = ownProps.length,
            resArray = new Array(i); // preallocate the Array
        while (i--)
            resArray[i] = [ownProps[i], obj[ownProps[i]]];

        return resArray;
    };
}
(window as any).__Zone_enable_cross_context_check = true;

    How to check this issue?

    Normally, You can see the error or warning from console on IE.

  3. This is super weird to my in ex project. The new lazy load syntax in angular 8 is not working well. It will not load your component.

    My solution:

    Remove new load child syntax in angular 8.

    const routes: Routes = [{
  path: 'lazy',
  // The new import() syntax
  loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
}];

    to 

    const routes: Routes = [{
  path: 'lazy',
  loadChildren: () => LazyModule
}];

    Hope this helps.

Upvotes: 0

Zhi Lv
Zhi Lv

Reputation: 21383

Try to use F12 developer tools to check whether there have some error?

I have created a new angular sample (then, according this link to config ES5), and use the similar tsconfig.es5.json, angular.json and tsconfig.json files. But the polyfills.ts file only contains the following content:

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

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

/* IE10 and IE11 requires the following to support `@angular/animation`. ALL Firefox browsers require the following to support `@angular/animation`. */
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

[Note] The polyfills.ts file doesn't contain the "core-js/es6/XXX" imports, if I add them, it will show the "Module not found error".

Then using ng serve --configuration es5 to run with the ES5 configuration, everything works well in IE browser (IE 10+).

And using ng build --configuration es5 --prod to build the application, then, copy everything within the output folder (dist/ by default) to a folder on the server and host it on the IIS, after that, browse the website using IE browser, everything works well.

You could according to the above steps to create a new angular8 application to test.

Upvotes: 3

Related Questions