angular-cli: Angular v8 - import 'web-animations-js' polyfill breaks the app

🐞 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.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 21
Comments: 18 (3 by maintainers)

Links to this issue

PrimeNG 8.0.0 releases with Angular 8 support, FocusTrap, and more | Packt Hub

Commits related to this issue

fix(@schematics/angular): add migration to update `web-animations-js` polyfill Previous versions rely on `this` which breaks differential loading since it's `undefined` when using script tags with ty... — committed to angular/angular-cli by alan-agius4 5 years ago
fix: remove 'web-animations-js' polyfill from host-app as it breaks the app This commit addresses issue #152 not to break the app, and is a workaround until https://github.com/angular/angular-cli/iss... — committed to SchweizerischeBundesbahnen/scion-workbench by danielwiehl 5 years ago
Remove 'web-animations-js' polyfill from host-app as it breaks the app This commit addresses issue #152 not to break the app, and is a workaround until https://github.com/angular/angular-cli/issues/1... — committed to SchweizerischeBundesbahnen/scion-workbench-demo by danielwiehl 5 years ago
fix: remove 'web-animations-js' polyfill from host-app as it breaks the app This commit addresses issue #152 not to break the app, and is a workaround until https://github.com/angular/angular-cli/iss... — committed to SchweizerischeBundesbahnen/scion-workbench by danielwiehl 5 years ago
Remove 'web-animations-js' polyfill from host-app as it breaks the app This commit addresses issue #152 not to break the app, and is a workaround until https://github.com/angular/angular-cli/issues/1... — committed to SchweizerischeBundesbahnen/scion-workbench-demo by danielwiehl 5 years ago
fix(@schematics/angular): replace forked `web-animations-js` with latest version Closes #14518 — committed to angular/angular-cli by alan-agius4 5 years ago
fix(@schematics/angular): replace forked `web-animations-js` with latest version Closes #14518 — committed to angular/angular-cli by alan-agius4 5 years ago
fix(): upgraded web-animations-js to 2.3.2 (#109) This fixes https://github.com/angular/angular-cli/issues/14518 — committed to Teradata/vantage-ui-template by aqupriyanka 5 years ago

Most upvoted comments

web-animations-js published 2.3.2 which includes the fix

+11

alan-agius4 on Jun 25, 2019

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

mgechev on Jun 11, 2019

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

bentzibentz on May 29, 2019

Hi, for the time being kindly update the dependency version to github:angular/web-animations-js#release_pr208 as we are waiting for https://github.com/web-animations/web-animations-js/pull/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.

alan-agius4 on May 29, 2019

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

Ismaestro on Jun 20, 2019