When integrating a microapp which uses the Yoti identity platform for age verification, I hit issues where other microapps would fail to load after the Yoti\/age verification microapp had loaded.<\/p>\n
The following error appeared on the browser console:-<\/p>\n
Error: Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten.
\nMost likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded. If you must load one, do so before loading zone.js.)
\nat Function.push..\/node_modules\/zone.js\/dist\/zone.js.Zone.assertZonePatched (polyfills.js:6911)
\nat new NgZone (vendor.js:42512)
\nat getNgZone (vendor.js:43220)
\nat PlatformRef.push..\/node_modules\/@angular\/core\/fesm5\/core.js.PlatformRef.bootstrapModuleFactory (vendor.js:43116)
\nat vendor.js:43162
\nat www.yoti.com\/:1<\/a><\/p><\/blockquote>\nA similar instance of this issue, where Bing loads after zone.js and similarly patches promise code, is detailed here<\/a>.<\/p>\n
In my case the culprit was the Yoti client SDK, which did the patching\/overwriting. A temporary fix, which worked successfully, was to load the Yoti SDK in index.html, prior to the angular bootstrap process, and remove\/disable my existing code which loaded the SDK dynamically via a script tag (after zone had loaded).<\/p>\n
My final solution was to use an Angular app initializer token, which permits a custom initialise function to be created. This can perform\u00a0 an asynchronous operation to be performed which returns a promise to the app initialiser, which allows bootstrapping to continue only when the promise has succeeded.<\/p>\n