Угловой шаблон: отключить div в производственном режиме

Question

У меня есть несколько divв моем веб-приложении, которые используются исключительно для отладки, и я хотел бы удалить их в производственном режиме.

В моих шаблонах я пытаюсь сделать что-то вроде этого:

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

Тем не менее, это не удается при запуске ng serve --prod со следующей ошибкой:

ОШИБКА в src/app/foo/foo.component.html(18,6):: свойство 'environment' не существует для типа 'Foo'

Есть ли способ отключить их в рабочем режиме, не добавляя другое поле для каждого компонента?

Я использую Angular Cli 1.7.4 и Angular 5.2.10

Answer 1

Вы можете создать директиву, чтобы показывать ваши элементы div только если environment.production равно false. Нечто подобное в этом примере блицстека: 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);
    }
  }

}

Answer 2

Ваше состояние правильно: *ngIf="!environment.production"

Хотя вам нужно импортировать объект среды в ваш компонент.

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

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