Angular CLI - exclude package from optimization

Question

In our Angular 6 app we use a pre-built React app for rendering some inner components. The compiled version of the React app is installed as a node module.

When I run code in dev mode with ng serve, everything is working perfectly as expected.

However, when I build the app in --prod, the React components start to behave a bit differently. Some weird rendering problems occur.

I was experimenting with angular-cli settings and realised that if I disable optimization ("optimization": false), the problem is gone. But the bundle size becomes 2 times larger.

These are the settings I've tried. And the 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)

It appears that problem occurs when Angular tries to optimize the React module.

I thought that it would be good to enable optimization for all the project except the React app module. Somehow exclude the React app module from the optimization pipeline and possibly bundle it in a separate chunk if this makes sense.

Could someone suggest a solution? Or any guesses why this could be happening?

Answer 1

Ok, as we didn't manage to find a better solution (yet), we decided to leave all the build settings as is. Instead, we added the main.js script from the compiled React library to the angular.json build.scripts array. This way Angular build system will add this library as a <script> to the index.html as is. This react-based library is compiled as a UMD module. So we can access it from the global scope (window.<libraryName>).

Then we removed all the imports of our React library from our code. Now, the Angular build process completely ignores that library and simply adds unmodified source as a separate script.

Everything works perfectly now.