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

[robisim74]

🐞 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
• Enableimport 'web-animations-js'; intopolyfills.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.

[alan-agius4]

Related to https://github.com/web-animations/web-animations-js/issues/45#issuecomment-496131946

[bentzibentz]

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

[alan-agius4]

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.

[dirkluijk]

Please not that the issue with Zone.js is a separate issue, which can be solved by importing Zone.js differently (move from polyfills.ts to main.ts). See https://github.com/manfredsteyer/ngx-build-plus/issues/4#issuecomment-417912637.

[Senneseph]

I believe #208 has been merged / released.

[mleimer]

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

[mgechev]

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

[brookhutchinson]

Thank you for the update

[macjohnny]

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]

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]

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]

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]

This issue has been fixed in @[email protected]

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]

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]

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]

web-animations-js published 2.3.2 which includes the fix

[viceice]

The blocked label can be removed.

[angular-automatic-lock-bot[bot]]

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._}