Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

State:
Created 4 years ago
Reactions:21
Comments:18 (3 by maintainers)

Top GitHub Comments

11reactions

alan-agius4commented, Jun 25, 2019

web-animations-js published 2.3.2 which includes the fix

7reactions

mgechevcommented, Jun 11, 2019

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

Top Results From Across the Web

How to add Web Animations API polyfill to an Angular 2 ...

Adding the polyfill with the newer, Webpack version of Angular CLI is easier: Install with npm install web-animations-js --save. Add to polyfills.ts ...

Browser support - Angular

See instructions on how to include polyfills into your project below. The suggested polyfills are the ones that run full Angular applications. You...

Differential Loading for Legacy Browser Support in Angular 9

This post discusses ways to support “legacy” browsers in terms of IE 11, and tuning Angular to support differential loading.

Changelog · CoreUI

CoreUI for Angular and CoreUI Angular Admin Template are in active ... to app.module; fix(polyfill): import web-animations-js ... breaking changes. Angular ...

Using the Web Animations API - MDN Web Docs

And unlike pure, declarative CSS, JavaScript also lets us dynamically set values from properties to durations. For building custom animation ...