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
angular.json and remove its
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.
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 (
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.