nativescript-angular: Angular Animations does not work with webpack

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

About this issue

Original URL
State: open
Created 6 years ago
Reactions: 1
Comments: 21 (5 by maintainers)

Commits related to this issue

fix: define process as undefined This will prevent webpack from adding a polyfill for `process` (`process/browser.js`) whenever someone does `typeof process`. What will change: - process will be und... — committed to NativeScript/nativescript-dev-webpack by sis0k0 6 years ago
fix: define process as undefined (#619) This will prevent webpack from adding a polyfill for `process` ([`process/browser.js`](https://github.com/defunctzombie/node-process/blob/master/browser.js)) w... — committed to NativeScript/nativescript-dev-webpack by sis0k0 6 years ago

Most upvoted comments

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

sis0k0 on Jul 25, 2018

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

bundyo on Nov 5, 2019

@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

edusperoni on Nov 5, 2019

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

breningham on Jul 17, 2018