Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
robisim74 opened this issue May 24, 2019 · 15 comments

Comments

@robisim74
Copy link

commented May 24, 2019

馃悶 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.

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

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

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

@alan-agius4

This comment has been minimized.

Copy link
Collaborator

commented May 27, 2019

@alan-agius4 alan-agius4 self-assigned this May 27, 2019

@filipesilva filipesilva pinned this issue May 27, 2019

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

alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue May 28, 2019

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 type module.

Fixes angular#14518

alexeagle added a commit to alan-agius4/angular-cli that referenced this issue May 28, 2019

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 type module.

Fixes angular#14518

@alexeagle alexeagle closed this in 3afdab2 May 28, 2019

alexeagle added a commit that referenced this issue May 28, 2019

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 type module.

Fixes #14518
@bentzibentz

This comment has been minimized.

Copy link

commented May 29, 2019

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

@alan-agius4

This comment has been minimized.

Copy link
Collaborator

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

@dirkluijk

This comment was marked as off-topic.

Copy link

commented Jun 6, 2019

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 manfredsteyer/ngx-build-plus#4 (comment).

@Senneseph

This comment has been minimized.

Copy link

commented Jun 10, 2019

I believe #208 has been merged / released.

@mleimer

This comment has been minimized.

Copy link

commented Jun 11, 2019

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

@mgechev

This comment has been minimized.

Copy link
Member

commented Jun 11, 2019

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

@brookhutchinson

This comment has been minimized.

Copy link

commented Jun 12, 2019

Thank you for the update

danielwiehl added a commit to SchweizerischeBundesbahnen/scion-workbench that referenced this issue Jun 13, 2019

fix: remove 'web-animations-js' polyfill from host-app as it breaks t鈥
鈥e app

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

danielwiehl added a commit to SchweizerischeBundesbahnen/scion-workbench-demo that referenced this issue Jun 13, 2019

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 angular/angular-cli#14518 is fixed.

simoneggler added a commit to SchweizerischeBundesbahnen/scion-workbench that referenced this issue Jun 13, 2019

fix: remove 'web-animations-js' polyfill from host-app as it breaks t鈥
鈥e app

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

simoneggler added a commit to SchweizerischeBundesbahnen/scion-workbench-demo that referenced this issue Jun 13, 2019

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 angular/angular-cli#14518 is fixed.
@macjohnny

This comment has been minimized.

Copy link

commented Jun 14, 2019

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

This comment has been minimized.

Copy link
Member

commented Jun 14, 2019

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

This comment has been minimized.

Copy link

commented Jun 18, 2019

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

This comment has been minimized.

Copy link

commented Jun 20, 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

@brookhutchinson

This comment has been minimized.

Copy link

commented Jun 20, 2019

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 igniteui-angular@8.0.0 and web-animations-js@2.3.1 as npm runtime dependencies inside your Angular Project

@alan-agius4 alan-agius4 added the blocked label Jun 21, 2019

@TharakaMadhusanka

This comment has been minimized.

Copy link

commented Jun 22, 2019

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

This comment has been minimized.

Copy link
Member

commented Jun 22, 2019

It鈥檚 generally the correct solution. The polyfill is only needed for those browsers if the 鈥淎nimationBuilder鈥 class is used within the project. Typical animation use does not require it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can鈥檛 perform that action at this time.