Angular v8 - import 'web-animations-js' polyfill breaks the app #14518

robisim74 · 2019-05-24T15:28:50Z

🐞 Bug report

Command (mark with an `x`)

- [ ] new
- [x ] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

Yes, the previous version in which this bug was not present was Angular v7

Description

If I add import 'web-animations-js'; into polyfills.ts , in production it breaks the app.

🔬 Minimal Reproduction

Create new project using @angular/cli 8.0.0-rc.4
npm install --save web-animations-js
Enable import 'web-animations-js'; into polyfills.ts
ng build --prod
Run the app, for example using http-server

🔥 Exception or Error




Uncaught TypeError: Cannot set property 'true' of undefined
    at Object.6dTf (polyfills-es2015.c4346c40f18bcedaacdd.js:1)
    at i (runtime-es2015.38622beb49066db5cb2b.js:1)
    at Module.hN/g (polyfills-es2015.c4346c40f18bcedaacdd.js:1)
    at i (runtime-es2015.38622beb49066db5cb2b.js:1)
    at Object.1 (polyfills-es2015.c4346c40f18bcedaacdd.js:1)
    at i (runtime-es2015.38622beb49066db5cb2b.js:1)
    at t (runtime-es2015.38622beb49066db5cb2b.js:1)
    at Array.r [as push] (runtime-es2015.38622beb49066db5cb2b.js:1)
    at polyfills-es2015.c4346c40f18bcedaacdd.js:1
Uncaught Error: In this configuration Angular requires Zone.js
    at new Aa (main-es2015.578a9f97ccae57b370de.js:1)
    at Ya.bootstrapModuleFactory (main-es2015.578a9f97ccae57b370de.js:1)
    at Module.zUnb (main-es2015.578a9f97ccae57b370de.js:1)
    at i (runtime-es2015.38622beb49066db5cb2b.js:1)
    at Object.0 (main-es2015.578a9f97ccae57b370de.js:1)
    at i (runtime-es2015.38622beb49066db5cb2b.js:1)
    at t (runtime-es2015.38622beb49066db5cb2b.js:1)
    at Array.r [as push] (runtime-es2015.38622beb49066db5cb2b.js:1)
    at main-es2015.578a9f97ccae57b370de.js:1

🌍 Your Environment


Angular CLI: 8.0.0-rc.4
Node: 10.14.2
OS: win32 x64
Angular: 8.0.0-rc.4
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.0-rc.4
@angular-devkit/build-angular     0.800.0-rc.4
@angular-devkit/build-optimizer   0.800.0-rc.4
@angular-devkit/build-webpack     0.800.0-rc.4
@angular-devkit/core              8.0.0-rc.4
@angular-devkit/schematics        8.0.0-rc.4
@ngtools/webpack                  8.0.0-rc.4
@schematics/angular               8.0.0-rc.4
@schematics/update                0.800.0-rc.4
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.30.0

Anything else relevant?

If I import zone before web-animation-js, the app works, but the first error is still present.

The text was updated successfully, but these errors were encountered:

alan-agius4 · 2019-05-27T08:41:08Z

Related to web-animations/web-animations-js#45 (comment)

… polyfill Previous versions rely on `this` which breaks differential loading since it's `undefined` when using script tags with type module. Fixes #14518

bentzibentz · 2019-05-29T12:12:08Z

Why is this issue closed? The error still exists in v8.0.0. If i import web-animations-js, the application breaks.

alan-agius4 · 2019-05-29T13:57:23Z

Hi, for the time being kindly update the dependency version to github:angular/web-animations-js#release_pr208 as we are waiting for web-animations/web-animations-js#208 to be released.

That said, if you updated to Angular 8 via ng update the dependency change should have been done automatically. Otherwise, if it's a new application, I would ask if you really need to add the web-animations-js polyfill in the first place. This is typically needed only when using the AnimationBuilder API.

Re-opening until we get this solved.

Senneseph · 2019-06-10T20:58:43Z

I believe #208 has been merged / released.

mleimer · 2019-06-11T06:56:29Z

@Senneseph It is merged but not yet released. Latest version is still 2.3.1 from 2 years ago.

mgechev · 2019-06-11T22:42:57Z

Just had a chat with the maintainers. They are working on a release in the next day or two.

brookhutchinson · 2019-06-12T00:10:46Z

Thank you for the update

…he app This commit addresses issue #152 not to break the app, and is a workaround until angular/angular-cli#14518 is fixed.

macjohnny · 2019-06-14T11:40:59Z

for those looking for a workaround to import libraries that are not fixed:
instead of doing import 'some-library' in main.ts or polyfills.ts, add the resulting path to the scripts section in your angular.json:

{
  "projects": {
    "my-project": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "scripts": [
              "node_modules/some-library/some-library.min.js"
            ]

this will be bundled in dist/scripts.js and in the dist/index.html you will have

<script src="scripts.js"></script>

without type="module"

clydin · 2019-06-14T14:58:34Z

It's also important to note that unless the application is actually using the AnimationBuilder class, the animations polyfill is not needed by Angular.

bfaulk96 · 2019-06-18T13:38:13Z

Just had a chat with the maintainers. They are working on a release in the next day or two.

"working on a release", they said... "next day or two", they said..

Ismaestro · 2019-06-20T09:07:27Z

Thanks @alan-agius4 I didn't know I don't need to import web-animations, I just thought if I would like to support IE/Edge or Safari I had to import it... Now I can remove it from the project

brookhutchinson · 2019-06-20T11:47:22Z

This issue has been fixed in @angularcli@8.0.3

A heads up to anyone using igniteui-angular npm package... You will need to install [email protected] and [email protected] as npm runtime dependencies inside your Angular Project

TharakaMadhusanka · 2019-06-22T06:26:34Z

I also met this issue, so I did uninstall web-animations.js and rebuild and published. Thus this was sorted out. But I am not sure it's the exact solution for this, as web-animations.js is required for IE and Safari browsers, according to the google.

clydin · 2019-06-22T13:21:19Z

It’s generally the correct solution. The polyfill is only needed for those browsers if the “AnimationBuilder” class is used within the project. Typical animation use does not require it.

alan-agius4 · 2019-06-25T08:47:11Z

web-animations-js published 2.3.2 which includes the fix

viceice · 2019-06-25T10:18:41Z

The blocked label can be removed.

…est version Closes #14518

This fixes angular/angular-cli#14518

angular-automatic-lock-bot · 2019-09-09T16:41:44Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

robisim74 mentioned this issue May 24, 2019

Angular v8 update robisim74/angular-l10n#244

Closed

alan-agius4 added freq3: high severity5: regression type: bug/fix labels May 27, 2019

alan-agius4 added this to the 8.0 milestone May 27, 2019

ngbot bot removed this from the 8.0 milestone May 27, 2019

alan-agius4 added the area: @angular-devkit/build-angular label May 27, 2019

ngbot bot added this to the Backlog milestone May 27, 2019

alan-agius4 self-assigned this May 27, 2019

filipesilva pinned this issue May 27, 2019

filipesilva modified the milestones: Backlog, 8.0 May 28, 2019

alexeagle added the hotlist: release-blocker label May 28, 2019

alexeagle closed this as completed in 3afdab2 May 28, 2019

alan-agius4 reopened this May 29, 2019

alan-agius4 removed the hotlist: release-blocker label May 29, 2019

alan-agius4 modified the milestones: 8.0, 8.0.1 May 29, 2019

Alex-Torres mentioned this issue May 31, 2019

Grid component doesn't work with Angular 8 in IE 11 telerik/kendo-angular#2299

Closed

This comment has been minimized.

Sign in to view

danielwiehl mentioned this issue Jun 13, 2019

Demo host app of workbench application platform fails to start SchweizerischeBundesbahnen/scion-workbench#152

Closed

alan-agius4 mentioned this issue Jun 19, 2019

Update to Angular 8 - web-animations-js #14826

Closed

alan-agius4 added the state: blocked label Jun 21, 2019

alan-agius4 mentioned this issue Jun 25, 2019

fix(@schematics/angular): replace forked web-animations-js with latest version #14887

Merged

alan-agius4 unpinned this issue Jun 25, 2019

vikerman closed this as completed in #14887 Jun 25, 2019

vikerman pushed a commit that referenced this issue Jun 25, 2019

fix(@schematics/angular): replace forked web-animations-js with lat…

6416629

…est version Closes #14518

vikerman pushed a commit that referenced this issue Jun 25, 2019

fix(@schematics/angular): replace forked web-animations-js with lat…

463bcc9

…est version Closes #14518

alan-agius4 removed the state: blocked label Jun 26, 2019

emoralesb05 pushed a commit to Teradata/vantage-ui-template that referenced this issue Jul 25, 2019

fix(): upgraded web-animations-js to 2.3.2 (#109)

a396c28

This fixes angular/angular-cli#14518

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Angular v8 - import 'web-animations-js' polyfill breaks the app #14518

Angular v8 - import 'web-animations-js' polyfill breaks the app #14518

robisim74 commented May 24, 2019

alan-agius4 commented May 27, 2019 •

edited

Loading

bentzibentz commented May 29, 2019

alan-agius4 commented May 29, 2019

This comment has been minimized.

Senneseph commented Jun 10, 2019

mleimer commented Jun 11, 2019

mgechev commented Jun 11, 2019

brookhutchinson commented Jun 12, 2019

macjohnny commented Jun 14, 2019

clydin commented Jun 14, 2019 •

edited

Loading

bfaulk96 commented Jun 18, 2019

Ismaestro commented Jun 20, 2019

brookhutchinson commented Jun 20, 2019

TharakaMadhusanka commented Jun 22, 2019

clydin commented Jun 22, 2019

alan-agius4 commented Jun 25, 2019

viceice commented Jun 25, 2019

angular-automatic-lock-bot bot commented Sep 9, 2019

Angular v8 - import 'web-animations-js' polyfill breaks the app #14518

Angular v8 - import 'web-animations-js' polyfill breaks the app #14518

Comments

robisim74 commented May 24, 2019

🐞 Bug report

Command (mark with an x)

Is this a regression?

Description

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

alan-agius4 commented May 27, 2019 • edited Loading

bentzibentz commented May 29, 2019

alan-agius4 commented May 29, 2019

This comment has been minimized.

Senneseph commented Jun 10, 2019

mleimer commented Jun 11, 2019

mgechev commented Jun 11, 2019

brookhutchinson commented Jun 12, 2019

macjohnny commented Jun 14, 2019

clydin commented Jun 14, 2019 • edited Loading

bfaulk96 commented Jun 18, 2019

Ismaestro commented Jun 20, 2019

brookhutchinson commented Jun 20, 2019

TharakaMadhusanka commented Jun 22, 2019

clydin commented Jun 22, 2019

alan-agius4 commented Jun 25, 2019

viceice commented Jun 25, 2019

angular-automatic-lock-bot bot commented Sep 9, 2019

Command (mark with an `x`)

alan-agius4 commented May 27, 2019 •

edited

Loading

clydin commented Jun 14, 2019 •

edited

Loading