Stack overflow error in IE11 with Angular 6 web application

[czo02]

We're using Klaro 0.7.3 with an Angular 6 Single Page Application. In this setup we're facing an stack overflow error which only occurs in IE11.

Our setup is like this:

We include the Klaro JS in the index.html like this so that it is loaded before the application itself:

<script type="text/javascript" src="klaro-no-css.js"></script>

The klaro.js file is copied from the node_modules via the assets config in the angular.json build configuration.

This is required because Klaro and Angular (zone.js) are both providing polyfills which are in conflict when zone.js is loaded after Klaro.

Inside the main.ts we initialize Klaro like this:

import { klaroConfig } from './klaroConfig';
declare const klaro;
window['klaroConfig'] = klaroConfig;
klaro.setup(klaroConfig);

The config is the example config from this repo.

These are the libraries from the package.json:

"@angular/animations": "^6.1.10",
    "@angular/common": "^6.1.10",
    "@angular/compiler": "^6.1.10",
    "@angular/core": "^6.1.10",
    "@angular/forms": "^6.1.10",
    "@angular/http": "^6.1.10",
    "@angular/platform-browser": "^6.1.10",
    "@angular/platform-browser-dynamic": "^6.1.10",
    "@angular/router": "^6.1.10",
    "@auth0/angular-jwt": "^2.0.0",
    "@fortawesome/fontawesome-free": "^5.12.1",
    "@ng-select/ng-select": "^2.1.3",
    "@ngx-formly/bootstrap": "^4.6.5",
    "@ngx-formly/core": "^4.6.5",
    "@ngxs/logger-plugin": "^3.4.3",
    "@ngxs/schematics": "0.0.1-alpha.5",
    "@ngxs/store": "^3.4.3",
    "@w11k/ngx-componentdestroyed": "^4.0.1",
    "angular-sortablejs": "^2.6.0",
    "angulartics2": "^7.5.2",
    "bootstrap-less": "^3.3.8",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.4",
    "crypto-js": "^3.1.9-1",
    "file-saver": "^2.0.1",
    "icheck": "^1.0.2",
    "immer": "^1.7.3",
    "jquery": "^3.3.1",
    "klaro": "^0.7.3",
    "moment": "^2.22.2",
    "moment-timezone": "^0.5.21",
    "ng-zorro-antd": "^1.8.1",
    "ngx-bootstrap": "^3.0.1",
    "ngx-clipboard": "^12.2.1",
    "ngx-cookie-service": "^2.3.0",
    "ngx-extended-pdf-viewer": "^1.8.4",
    "ngx-filesaver": "^2.2.1",
    "ngx-lazy-load-images": "^1.3.1",
    "ngx-uploader": "^6.0.1",
    "rxjs": "^6.0.0",
    "sortablejs": "^1.7.0",
    "sweetalert2": "^7.25.6",
    "tableau-api": "^2.2.2",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.26"

Steps to reproduce

Unfortunately the error doesn't occur in a blank Angular 6 app with the same setup. And I'm not able to provide any code examples from our application.

Current behavior

In Chrome, Firefox, Safari and Edge the setup works as expected.

But in IE11 on Windows 10 we get a Stack overflow error.

The whole app crashes and nothing is rendered in the browser.

I think this might be caused by some kind of conflict between the app and the Klaro library.

[adewes]

Hi @czo02, that sounds complicated! Do you use Webpack to bundle your Angular code? The problem might arise due to conflicting polyfills, sounds like a recursive function calling itself until it runs out of stack space.

When using Klaro as part of a Webpack-based project I'd recommend compiling it together with the other project, as this will ensure that polyfills like CoreJS are included only once. There's an example in the examples directory of the Github repository for this.

We also noticed deviations in behavior between the debug and production builds for IE11, which we attribute to different behavior in the polyfill libraries as well, so if you're running the production version of Klaro with a development bundle of your app it might cause problems as well. You could try running the debug version as well (using npm run-script make-dev) and including the Klaro bundle from there, the best option is to just import Klaro source modules into your project (they are included in the NPM bundle, see the examples directory).

I'm afraid I can't provide any more specific tips about this without looking at the code in detail, and as we don't have an automated IE test setup either.

[czo02]

@adewes Thanks for you quick response! I took your input and experimented a bit with different build options in your repo.

I found out that the option useBuiltIns: false in the babel config will produce a JS bundle without any polyfills. For now this is a good workaround for us so that we can fix the issue. This of course requires us to build our own version.

Would it be possible for you to provide a separate bundle without any polyfills? I would imagine that others might also benefit from this.

[adewes]

Sorry for the late reply, great that it solved your problem @czo02! I'll think about this, I think the use case is suffciently specific to justify importing and building Klaro from source, that should be easier than providing a separate bundle (as we could still run into problems if e.g. your Webpack configuration or module convention differs).

If you wanna give importing Klaro via NPM and compiling it via Webpack with the rest of your project a try just let me know, happy to help if you should encounter any issues! I'm closing this for now, but please feel free to open a new issue in case anything is amiss.