Enabling optimization breaks Angular site for no apparent reason

I'm currently using Angular to build a front-end website to search for and display information obtained via API queries. When I use ng build to compile the project into a file bundle for static deployment, the resulting bundle only works properly if I use the --optimization false option when building. If I enable optimization, trying to access the site produces a variety of runtime errors.

The runtime errors do not appear to be consistent – seemingly arbitrary changes in my code lead to entirely different errors showing up when I try to access the site. It's also not possible to easily figure out what's causing the errors, both because of the minified object/function names and the fact that every single error gets traced back to the following line in main.js and no further:

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));


Here are some of the errors that have appeared – but as mentioned earlier, the specific errors produced seem to change whenever I make changes to my code:

• TypeError: rt is not a function
• Cannot read properties of undefined (reading '3')
• Uncaught TypeError: Class constructor xe cannot be invoked without 'new'
• Uncaught (in promise) TypeError: He is not a function

Disabling optimization when building the file bundle completely resolves all of these issues, and the resulting site runs fine with no errors. However, I'd rather not leave my site permanently unoptimized, since the file size of the unoptimized bundle is significantly larger, and the optimization presumably comes with various other improvements as well.

Any ideas on why optimization might be breaking the site, and how to prevent that from happening in the future, would be greatly appreciated.

Continue reading...