Linked Questions

Popular Questions

How to prohibit Angular touching (minifying) specific scripts in prod mode

Asked by At

We are building an Angular (v. 7) app where we also use some React-based widgets inside. Those React widgets are bundled in a umd node module. In dev mode everything works as expected - widgets are rendered correctly. However, in production mode something strange happens and some of the React widgets are rendered in a weird way.

After some experimenting I tried to include those widgets inside scripts in angular.json and remove its import from ts files. Then I just access it by its name via the window['libraryName']. Building in prod like this showed correct rendering (same as in dev mode). So, I concluded for myself that incorrect rendering happens because of the angular's minification process. If the script is left untouched everything works correctly.

Now, this solution (even though it works) is not perfect at all. First, it's quite ugly to access a library via a window object. And more importantly, the library is loaded as soon as the app starts loading which is unacceptable due to its size and to the fact that it's only used inside a lazy-loaded module.

I also tried to use a TypeScript dynamic import() and get a library this way. But that didn't work as Angular still minifies that lib when it sees that I'm importing it in one or another way.

I know this is a weird issue and I didn't manage to find anything similar to what I'm experiencing. But judging by all the facts mentioned - the best solution would be to somehow force Angular minification process to ignore that library.

p.s. I might be wrong that it's due to minification exactly. But it's definitely due to some steps involved in the prod build packaging that are different from what happens in dev build (ng serve).

Those are different angular.json build settings and corresponding results:

optimization: false, buildOptimizer: true, vendorChunk: false - 33.3mb (works good)
optimization: true, buildOptimizer: false, vendorChunk: false - 17mb (not working)
optimization: true, buildOptimizer: false, vendorChunk: true - 17mb (not working)

React widgets library is minified by itself using webpack v.4 built-in minifier.

Related Questions