Angular Animations does not work with webpack

[breningham]

I have a Nativescript Angular Application where i make use of Angular animations, they work fine in debug builds, without web-packing or AOT but when i try web-packing/AOT i get the following error
JS: ERROR TypeError: element.setAttribute is not a function and Animations no longer work.

this is on both platforms, using Nativescript Angular 6.0.6, with core Angular at version 6.0.7.

Nativescript CLI Version: 4.2.0-2018-07-10-11964, though the issue is still there with nativescript@latest

[tsonevn]

HI @breningham,
Can you send us a sample project or at least some code snippets, which can be used for debugging?

[breningham]

Is there any chance i can get your email so i can give you access to our private repo?
The Project is a Nx Workspace with Both a Web and Nativescript App (thoug with no Shared Libs).

As for code snippets, ALL animation declarations (even those not used) causes this error. Removing the animations declaration of a Component, removes the Error.

[breningham]

i did create a demo repo, but cannot currently build it with Webpack due to NativeScript/nativescript-dev-webpack#607 (comment)

The Repo is here - Just Generated it with @angular/cli w/ nativescript-schematics :
https://github.com/breningham/tns-aot-animations

[tsonevn]

Hi @breningham,
Thank you for the provided sample project.
I tested it on my side and was able to recreate the issue. I will mark this as a bug. For now, I will suggest keeping track of the issue for further info.

[mr-White]

I just updated my NativeScript app to use the latest 6.x series of Angular and have ran across this issue. Getting the same TypeError.

Removing the component that uses Angular animations, gets rid of the error.

[sis0k0]

The fix is in the nativescript-dev-webpack plugin and it will be released in v0.2.1. You can manually apply the patch in your webpack.config.js:

// ...
            new webpack.DefinePlugin({
                "global.TNS_WEBPACK": "true",
                "process": undefined,  // < ---- add this line
            }),