-1

My angular 5 App is working fine in chrome,firefox. but when i tried to open in Microsoft Edge(WIN10 OS), Application is always open in IE 11 browser.

Also it didn't produce any error on console. When i hit the url in microsoft edge. the IE11 browser automatic open with given URL. i enabled all IE/Edge support in pollyfills.

Below are the my code in different files: Index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <base href="/">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>VisitedWebApp</title>
  <!-- <script type="text/javascript">
    window.onbeforeunload = function () {
      localStorage.clear();
    }
   </script> -->
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

polyfills.ts

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

/** 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';
import 'web-animations-js';  // Run `npm install --save web-animations-js`.
import 'zone.js/dist/zone';  // Included with Angular CLI.

package.json

{
  "name": "VisitedWebApp",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --extract-css",
    "build": "ng build --extract-css",
    "build:ssr": "npm run build -- --app=ssr --output-hashing=media",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/platform-server": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@ng-bootstrap/ng-bootstrap": "^1.1.2",
    "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
    "@ngx-translate/core": "^9.1.1",
    "@ngx-translate/http-loader": "^2.0.1",
    "angular5-csv": "^0.2.10",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap": "^3.3.7",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.4.1",
    "jwt-decode": "^2.2.0",
    "ng-click-outside": "^3.3.0",
    "ng2-datepicker-bootstrap": "^1.0.0",
    "ngx-toggle-switch": "^2.0.5",
    "node-require": "0.0.10",
    "rxjs": "^5.5.2",
    "url-search-params-polyfill": "^4.0.0",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.6.3",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }
}
TylerH
  • 20,799
  • 66
  • 75
  • 101
  • I am trying to figure out the Root cause of issue, but could not succeeded yet. In addition, I tried below approaches to resolve the problem: 1- Use and verify different value in in index.html. 2- Modify the polyfills.ts file and make it more comfortable for IE and Edge browser. 3- Updating angular config files. 4- Changes the MS edge setting. I have found below link while searching: https://support.microsoft.com/en-us/help/4019877/windows-10-open-internet-explorer-11-for-webpages-that-required-enterp – Dhirendra Singh Sep 21 '18 at 12:10
  • mentioned that: "On a Windows 10-based computer that has the Anniversary Update installed, when a site is opened in Edge and is redirected to Internet Explorer 11, the "Open With Internet Explorer” option is disabled and that message does not appear. Instead, the webpage is automatically redirected and loaded in Internet Explorer 11" As of now, I am still struggling to resolve the issue for Edge browser. – Dhirendra Singh Sep 21 '18 at 12:10

1 Answers1

0

Check for your EDGE version as Angular supports only 2 most recent versions of EDGE,

Angular brower support

in addition to it check this stackoverflow answer.

T. Shashwat
  • 1,135
  • 10
  • 23
  • Hi @tshashwat7 We are using Edge version 40.x.. and the latest one is 42. Angular supports Edge with 2 most recent major versions. Also i have updated ES6 to ES7 in Polyfills.But app is not working..:( – Dhirendra Singh Sep 20 '18 at 11:59
  • yes i have verified but not working. also i have updated meta tag as well in index.html – Dhirendra Singh Sep 20 '18 at 12:06
  • hey @DhirendraSingh why dont you update your app , as I can see your CLI version as 1.6, try running " ng update @angular/cli " two times . As i opened my angular 6 app and its working fine in EDGE without updating polyfills except zone and reflect. – T. Shashwat Sep 20 '18 at 12:32
  • sure ... will do that get to you update for the same by tomorrow .. thanks for the response. – Dhirendra Singh Sep 20 '18 at 15:05
  • not able to update the cli and it contains many depencies and affect the project. – Dhirendra Singh Sep 21 '18 at 12:08