Running ng build with optimization set to true breaks this library about angular-skyhook HOT 7 CLOSED

This library doesn't have any side-effecting getters. It has a bunch of getters, but they are pure. At least, I have ripgrepped the codebase pretty hard and examined the ones it has. If you can find one yourself, let me know.

If it's a getter problem, it's either upstream (dnd-core) or in your code. My guess from your stack trace is the latter (it has beginDrag a few frames back). Edit: being in your code is supported by the fact that ng build --prod is working just fine on the examples page.

It's not necessarily a getter problem, though. I'll think about what else it could be.

from angular-skyhook.

Hey, thank you for the quick response!

I checked our code, and there is not a single place where we call endDrag ourselves, thus making me think it cannot be our fault.
If this assumption is wrong and it could still be our fault please say so, then I will do another more thorough examination.
Edit: I checked our code quickly, none of our getters seem to have side-effects.

from angular-skyhook.

I also did a quick search in dnd-core, and found this issue that is atleast somewhat similar: react-dnd/react-dnd#1049

Will have another, better, look tomorrow.

from angular-skyhook.

So this morning I did some searching around and I found more issues on dnd-core related to minimization. So if you agree that they should fix this we can close this issue here, and I'll make a new one over there.

Some related issues on dnd-core:
https://github.com/react-dnd/react-dnd/issues?utf8=%E2%9C%93&q=is%3Aissue+minimize
None of them over any real solution other than to disable the minification.

from angular-skyhook.

Wew, after what looked like it was turning into a very big headache this morning turned out pretty great, I found a workaround!

Basically it boils down to not using UglifyJS as minimizer in webpack, as that somehow breaks something somewhere related to using drag and drop (in skyhook). Instead I switched to using Terser, which is actually planned to be the default in webpack 5. To achieve this I made a sort of hack for the @angular-devkit/build-angular package using the patch-package package.

patch-package was used to generate a patch for the @angular-devkit/build-angular package (I used this site as a how-to). I attached the patch file's content at the bottom. Then I set up a prepare hook in the package.json like this:

  "scripts": {
    "prepare": "patch-package",
    ...
    }

And it works! :D

Patch file used:

diff --git a/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js b/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js
index 99903a9..717f3bb 100644
--- a/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js
+++ b/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js
@@ -22,7 +22,7 @@ const find_up_1 = require("../../utilities/find-up");
 const utils_2 = require("./utils");
 const ProgressPlugin = require('webpack/lib/ProgressPlugin');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
-const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 const StatsPlugin = require('stats-webpack-plugin');
 /**
  * Enumerate loaders and their dependencies from this file to let the dependency validator
@@ -267,12 +267,7 @@ function getCommonConfig(wco) {
                     // component styles retain their original file name
                     test: (file) => /\.(?:css|scss|sass|less|styl)$/.test(file),
                 }),
-                new UglifyJSPlugin({
-                    sourceMap: buildOptions.sourceMap,
-                    parallel: true,
-                    cache: true,
-                    uglifyOptions,
-                }),
+                new TerserPlugin(),
             ],
         },
         plugins: extraPlugins,

from angular-skyhook.

You should probably run your (unfixed) code in a debugger with pausing on exceptions enabled (and source maps). Then you’ll know where it actually is.

from angular-skyhook.

Closing because the examples still work with --prod so it’s not this library’s problem.

from angular-skyhook.