Nativescript-angular: 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 https://github.com/NativeScript/nativescript-dev-webpack/issues/607#issuecomment-405209925

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
            }),

[mr-White]

Confirmed @sis0k0 ! Thanks for the fix

[breningham]

No that doesn't work for me it actually creates more problems.

When i make the changes components flicker, and don't work properly.
this is without actually re-enabling the animations. just making the changes above in the webpack file...

I'll get a gif of it in a moment.

[breningham]

heres the issue

| No Animations | With Change Above |
| --- | --- |
|||

[sis0k0]

Hi @breningham, can you share your app? We tested the change with all applications in the {N} organisation and we haven't encountered this problem.

[breningham]

@sis0k0 i have sent you a Zip file of the project on the Nativescript Community slack.

[jolafrite]

I also have a problem with this solution.
There is some dependencies needing process that get broken with this solution

[sis0k0]

@jolafrite, what dependencies? Can you share your package.json?

[jolafrite]

pbkdf2 is the current dependency breaking my app
this line https://github.com/crypto-browserify/pbkdf2/blob/master/lib/default-encoding.js#L3 becomes if (undefined.browser) {

From what is see this is a webpack dependency.

[jolafrite]

Instead of applying [email protected] config.
I created an hook that replace

function isNode() {
  return (typeof process !== 'undefined');
}

by

function isNode() {
  return false;
}

into node_modules/@angular/animations/fesm5/browser.js

[edusperoni]

@bundyo setting process as undefined breaks a lot of packages. Maybe there's a compromise? There may be a way of using a plugin that only sets it to undefined on angular packages? Or perhaps opening an issue on angular itself so they check process.broswer instead of just process.

Edit: angular itself has a better function to check if is running in node: https://github.com/angular/angular/blob/5eb7426216b1597cca3a7923cc714e59464fec89/packages/zone.js/lib/common/utils.ts#L110

[bundyo]

Huh, that was in my fork (which was not really a fork, but still not in this repo)... WTF.

[vytautas-pranskunas-]

Hello,

Any progress here? I run into same issue. Cannot believe it is opened since 2018 :(

[cjohn001]

Hello, I would be interested in the progress as well. With NS 6.5 the bug still persists.

[SmailHammour]

Any news on this?

[arturikoX]

Still no news ?