0

Angular 6 application which is integrated with keycloak is not loading in Microsoft Edge version 41.162 and Microsoft EdgeHTML 16.16299.

In console throws only warning messages: HTML1300: Navigation occurred. CSS3121: The media query -ms-viewport has been deprecated.

I have tried the following steps:

1) I uncommented all of the imports in my polyfills.ts and ran the appropriate npm install commands.

2) I added the following line in my index.html

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

3) And I also turned off the "Display intranet sites in Compatibility View" in IE11 as suggested in the post.

4) Verified that any subscribe function that is running outside of ts files are using

.subscribe(function(data) { }); instead of

.subscribe((data) => {});

but none of the following solutions helped.

tsconfig.json

  {
    "compileOnSave": false,
    "compilerOptions": {
      "outDir": "./dist/out-tsc",
  "sourceMap": true,
  "declaration": false,
  "moduleResolution": "node",
 "emitDecoratorMetadata": true,
 "experimentalDecorators": true,
 "allowSyntheticDefaultImports": true,
 "target": "es5",
 "typeRoots": ["node_modules/@types"],
 "lib": ["es2015", "es2017", "dom"]
}
 }

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


    /**
     * Required to support Web Animations `@angular/platform-browser/animations`.
     * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
     **/
    import 'web-animations-js';  // Run `npm install --save web-animations-js`.

index.html

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

Application to be loaded and redirected to keycloak for login after authorization needs to be redirected to the application. It's working in chrome and Mozilla Firefox browsers.

krithicka sedhu
  • 31
  • 1
  • 4
  • Before integrating with Keycloak whether your angular application works well on Microsoft Edge browser. I have created a new application without using Keycloak, it works well on my side. So I suppose perhaps the issue is related to the Keycloak, please check the related code. Besides, since you are using Keycloak to login, please try to use F12 developer Network tools to the related http request, make sure its success, – Zhi Lv Aug 16 '19 at 14:46
  • The application works fine without integrating keycloak, but for authentication and authorization keycloak is needed. I checked in F12 developer Network tools, the keycloak request was not sent in the network panel. The application is not loading. – krithicka sedhu Aug 20 '19 at 07:31
  • which version of Keycloak are you using? Please check the related code about keycloak authentication and authorization, here is a thread about [Keycloak authentication](https://stackoverflow.com/questions/32120129/keycloak-is-causing-ie-to-have-an-infinite-loop), you could refer it. Besides, since this issue is related to Keycloak, I suggest you could also feedback this problem to [Keycloak Team](https://www.keycloak.org/community.html). – Zhi Lv Aug 20 '19 at 15:02

0 Answers0