Angular class instance is giving object instance in production build

Question

I'm using Angular 8

In the application, I have an array of objects to render data accordingly in the HTML

public components = [
  {
    type: "button",
    data: {
      label: "Click here"
    }
  },
  {
    type: "description_box",
    data: {
      content: "Enter description"
    }
  }
]

Now there are two buttons Add Button and Add Description Box when the user clicks on the button, the requested object is pushed to the components array which is handled like

onClick(component: string) {
  switch(component) {
    case 'button': data = new Button(); break;
    case 'description_box': data = new DescriptionBox(); break;
  }

  this.components.push({
    type: this.getTypeFromData(data),
    data: data
}

/**
 * spit class constructor name in lowercase underscored
 * Ex: DescriptionBox -> description_box
 */
private getTypeFromData(data) {
  const className = data.constructor.name.split(/(?=[A-Z])/);

  let componentType = '';
  for (const name of className) {
    componentType += name + '_';
  }

  return componentType.toLowerCase().slice(0, -1);
}

The two classes are like

components.ts

export class Button {
  label: string;
  color: {
    label: string;
    button: string;
    border: string;
  };
  link: string;
}

export class DescriptionBox {
  text = 'New Title';
}

This works fine in the local development, but it is not working as expected in the production build.

In the production build, the class instance is giving o object instead of the class instance.

Answer 1

this happends because of your classes got minified, so it would take less space. istead of checking constructor.name you can check it with data instanceof DescriptionBox instead.