0

normally everything works fine for me, when I run ng build my code keeps working fine, and the event is triggered (activate). But when executing ng build --prod this event does not run. Why can this happen to me and how can I correct it?

Thank you

this code is my app.ts and .html

<menu class="m-0 p-0" *ngIf="hide"></menu>
<router-outlet class="m-0 p-0" (activate)='onActivate($event)' ></router-outlet>
<footer_component  *ngIf="hide"></footer_component>


onActivate(component:any){
 this.activatedComponent = component.constructor.name;

before compiling with ng build works, after running ng build it also works, but with ng build --prod no, it seems that it does not enter the function.

 console.log(activatedComponent);

 if(this.activatedComponent != 'LoginComponent' && this.activatedComponent != 'RestorePasswordComponent'  && this.activatedComponent != 'NotFoundComponent'){
  this.hide = true;
 } else 
 {
  this.hide = false;
 }

}
yavg
  • 2,761
  • 7
  • 45
  • 115
  • check this: https://stackoverflow.com/questions/46561116/angular4-component-name-doesnt-work-on-production/46561297 – porgo Jun 27 '19 at 05:28
  • So even `console.log(activatedComponent);` doesn't happen? – Ludevik Jun 27 '19 at 06:04
  • You could just subscribe to the Angular's Router `events` observable stream and use the URL instead to toggle the `hide` flag. – El-Mo May 11 '21 at 05:59

1 Answers1

0

It may most possibly happen due to minification process in the production build.

In the code you provided, it is checking name of the component like this.activatedComponent != 'LoginComponent'. During production build, due to minification, names might be minified, and hence the code does not enter in if condition, as possibly it finds minified name. Such should not be relied that can possibly be minified at some point before deployment.

One quick way in such situation could be to expose some public property in Component like COMPONENT_NAME and assign the component name to this property, and access this property in your code, for example:

onActivate(component:any){
 this.activatedComponent = component.COMPONENT_NAME;
viking
  • 411
  • 1
  • 5
  • 14