Enabling optimization in production breaks certain components in Angular app

Question

I'm currently using Angular for my app. When I use ng build to compile the project in production environment into a file bundle for static deployment I get console errors, the resulting bundle only works properly if I use the development environment where optimization option is false when building. If I enable optimization, trying the app produces a variety of console errors.

The console errors do not appear to be consistent – seemingly arbitrary and in various but not all components. It's also not possible to easily figure out what's causing the errors, both because of the minified object/function names in main.js.

Here are some of the errors that have appeared as mentioned:

Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'resolveComponentFactory')
TypeError: Cannot read properties of undefined (reading 'resolveComponentFactory')
at main.78b92ab8588ccb699d55.js:1:20111326

Error: NG0302: The pipe 'translate' could not be found!
at main.78b92ab8588ccb699d55.js:1:3736300

TypeError: Cannot read properties of undefined (reading 'location')
at gi.injectWindowHeader (main.78b92ab8588ccb699d55.js:1:1439711)

TypeError: Cannot read properties of undefined (reading 'tableColumns')
at ye.ngAfterViewInit (main.78b92ab8588ccb699d55.js:1:19400784)

Here is my build configurations in angular.json:

"configurations": {
            "production": {
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                },
                {
                  "type": "initial",
                  "maximumWarning": "2mb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "aot": true,
              "optimization": {
                "scripts": true,
                "styles": {
                  "minify": true,
                  "inlineCritical": true
                }
              }
            },
            "development": {
              "vendorChunk": true,
              "extractLicenses": false,
              "buildOptimizer": false,
              "sourceMap": true,
              "optimization": false,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "development"
        },

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.

Answer 1

There is no perfect solution for that bicycle routing implementation.

I see your options like this

1: rely on something else rather than class name.

For example use class ref itself (class name is minified, but the reference to the class would be the same)

class AlertComponent {
...
}

...
const componentClass = component.constructor;
switch(componentClass) {
  case AlertComponent: ...;
  ...
}

2: disable mangling, but it will increase the bundle size

"build": "env NG_BUILD_MANGLE=false ng build --prod"