typescript - plantilla de Angular: Desactivar div en modo de producción

Tengo varios div en mi aplicación web que se usan únicamente para depuración, y me gustaría eliminar estos en modo de producción.

En mis plantillas, estoy tratando de hacer algo así:

<div *ngIf=!environment.production>{{ fooState | async | json}}</div>

Sin embargo, esto falla al ejecutar ng serve --prod con el siguiente error:

ERROR en src/app/foo/foo.component.html(18,6): : La propiedad 'environment' no existe en el tipo 'Foo'

¿Hay alguna manera de desactivar estos en el modo de producción sin añadir otro campo a cada componente?

Estoy usando Angular CLI 1.7.4 y Angular 5.2.10

Respuesta #1

Podrías crear una directiva para mostrar tus elementos div solo si environment.production es falso. Algo como en este ejemplo de blitzstack: https://stackblitz.com/edit/angular-eziobx

import { Directive, ViewContainerRef, OnInit, TemplateRef } from '@angular/core';
import { environment } from '../environment';

/**
 * usage: <div *hideProd></div>
 */
@Directive({
  selector: '[hideProd]'
})
export class HideProdDirective implements OnInit{

  constructor(private templateRef: TemplateRef<any>, private viewContainerRef: ViewContainerRef) { }

  ngOnInit(): void {
    if(!environment.prod){
      this.viewContainerRef.createEmbeddedView(this.templateRef);
    }
  }

}

Respuesta #2

Tu condición es correcta: *ngIf="!environment.production"

Aunque necesitas importar el objeto del entorno en tu componente.

import { environment } from 'src/environments/environment';

Component({...})
export class MyComponent {
  public environment = environment;
}