After encountering a similar error on one of my projects, I managed to fix it but now I'm curious about why it occurred in the first place.
When using a constant string enum in Typescript, it is compiled into either a simple string or an object with a property that holds that string.
For an example, you can click here.
You can also see another example here. (To view the compiled JS code, click on the arrow next to JS(Typescript) and select "View Compiled JS")
However, when using a const enum value and optimizing your angular build with AOT, the enum might get completely removed and replaced by strings.
Here's an example to showcase this behavior.
The issue arises when building with ng build --prod, which activates optimizations like --build-optimizer and --aot, causing the deployed build to crash at runtime.
This particular scenario is illustrated in angular.io's animations documentation.
Modifications have been made in /src/app/hero-list-basic.component.ts, specifically in lines 15, 44, 48, 60.
If you inspect the compiled JS bundle, you'll notice that the enum is nowhere to be found. Despite existing references, such as in the constructor at line 60, the build simply replaces the enum with the corresponding string inline, mirroring the behavior seen in TS Playground.
In the decorator (@Component), though, instead of being inlined, the enum appears as null. This inconsistency can be observed around line 6557 in my bundle.js file.
An image for reference: https://i.sstatic.net/vgP2u.png
(Note: the line with name: "active" @ line 6569 retains its value because I didn't change it to an enum during that specific build)