The same Angular code stops working in production

I have a navigation service in my Angular application that works perfectly in development mode, but once the production build is made, it stops working.

The service is straightforward; it returns the currently active component, but in production, it returns just 'a'.

Here is the service code:

@Injectable({
  providedIn: 'root'
})
export class NavigationService {
  private activeComponentSubject: BehaviorSubject<string> = new BehaviorSubject<string>('');

  constructor(private router: Router, private route: ActivatedRoute) {
    this.subscribeToNavigationEnd(this.route);
  }

  private subscribeToNavigationEnd(route: ActivatedRoute): void {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      const activeComponent = this.getActiveComponent(route);
      this.activeComponentSubject.next(activeComponent);
    });
  }

  private getActiveComponent(route: ActivatedRoute): string {
    const childRoute = route.firstChild;

    if (childRoute) {
      return this.getActiveComponent(childRoute);
    } else {
      const componentName = route.outlet === PRIMARY_OUTLET ? route.component?.['name'] : '';
      return componentName || '';
    }
  }

  getComponent(): BehaviorSubject<string> {
    return this.activeComponentSubject;
  }
}

And in the component, it's called like this:

ngOnInit(): void {
  this.navigationSubscription = this.navigation.getComponent().subscribe(component => {
    this.setPath(component);
    console.log(component);
  });
}

If I open the component in the development I get values like ShopComponent, CheckoutComponent, etc.

While in the production I just get 'a'.

Here is angular.json configuration:

  "configurations": {
    "production": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ],
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "namedChunks": false,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true,
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "2mb",
          "maximumError": "5mb"
        },
        {
          "type": "anyComponentStyle",
          "maximumWarning": "6kb",
          "maximumError": "10kb"
        }
      ],
      "serviceWorker": true,
      "ngswConfigPath": "ngsw-config.json"
    },
    "development": {
      "buildOptimizer": false,
      "optimization": false,
      "vendorChunk": true,
      "extractLicenses": false,
      "sourceMap": true,
      "namedChunks": true
    }
  }

It is expected. All of the classes are renamed to short pieces of text. This process is named minification and is done to make the bundle (JavaScript file size) smaller. You are getting your components correctly; just their class names are no longer the long readable ones, but short ones.

Thanks to @Andrei's explanation.

Simple solution:

Use component selector as a unique identifier instead. To do so, you could use the help of the function reflectComponentType to retrieve the component metadata as an object and read the component selector.

const mirror = reflectComponentType(route.component);
return mirror?.selector;

Solution 2

Define a public property on your component to hold the component name.

export class MyComponent {

    public componentName = 'MyComponent';
}

return route?.component.componentName;

It works only for small amount of route components.