Currently, I am utilizing Angular to construct a front-end website that searches for and showcases information obtained through API requests. Whenever I compile the project into a file bundle for static deployment using ng build, I notice that the resulting bundle functions correctly only if I use the --optimization false option during compilation. Enabling optimization leads to various runtime errors when attempting to access the site.
The runtime errors seem erratic - making slight changes in my code results in entirely different errors being displayed when visiting the site. It is challenging to pinpoint the cause of the errors due to the minified object/function names and the fact that every error points back to this specific line in main.js:
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));
Here are some examples of errors I have encountered – however, these errors tend to change whenever modifications are made to the code:
TypeError: rt is not a functionCannot 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 during the bundling process resolves all these issues, and the site runs smoothly without any errors. Nevertheless, I would prefer not to keep my site unoptimized permanently as the unoptimized bundle significantly increases the file size, and optimization likely brings other enhancements as well.
If you have any insights on why optimization might be causing disruptions on the site and how to prevent it from happening in the future, your assistance would be greatly valued.