search

ionic-team / stencil

A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.
https://stenciljs.com
Other
12.58k stars 787 forks source link

WC issue with ZONE.js on an angular7 app (only IE11) #1717

Closed pantro14 closed 5 years ago

pantro14 commented 5 years ago

Stencil version:

 @stencil/core@1.1.5

I'm submitting a: [x ] bug report [ ] feature request [ ] support request

Current behavior: When I run the web component on an angular7 project in IE11, the following issue happens. Zone.js has detected that ZoneAwarePromise (window|global).Promise has been overwritten. Most 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.)

if I remove the web component the app loads perfectly.

Expected behavior: the app starts normally showing the web component

Steps to reproduce:

Other information: This issue is only happening in IE11

dgibson666 commented 5 years ago

We're having this exact issue as well and would like to know a solution.

Fix coming soon? https://github.com/ionic-team/stencil/pull/1720/files

pantro14 commented 5 years ago

@dgibson666 I see a new version 1.1.6 that fixes this bug: Bug - polyfill: ensure window context w/ fetch polyfill https://github.com/ionic-team/stencil/blob/master/CHANGELOG.md

dgibson666 commented 5 years ago

No, I think that is different. The PR above has not yet been merged. And this issue is not marked fixed. Am I wrong? Is the issue gone for you in 1.1.6?

manucorporat commented 5 years ago

This PR should fix how we apply the promise polyfill in webpack setups: https://github.com/ionic-team/stencil/pull/1720

but it requires the promise polyfill to be applied manually by the user if IE11 is supported

pantro14 commented 5 years ago

@manucorporat thank for your reply, I'm updating version to 1.1.7, and also added

applyPolyfills().then(() => { defineCustomElements(window); }); in my main.ts file in Angular 7 app.

@dgibson666 have you tried the new version? for me it doesn't work either.

pantro14 commented 5 years ago

I fixed the issue removing import 'zone.js/dist/zone' and placing it into the main.ts file after bootstrapping the app:

import { AppModule } from './app/app.module'; import 'zone.js/dist/zone'; // Included with Angular CLI.

I also installed core-js polyfills https://github.com/zloirock/core-js The component is now shown in IE11 withou problems: