angular/projects/ng-devtools/src/lib/devtools.component.html

<div class="mat-typography mat-app-background" style="height: 100%;">
  <ng-container *ngIf="angularExists === true; else errorOrLoading">
    <ng-container *ngIf="angularIsInDevMode; else angularIsInProdMode">
      <div *ngIf="supportedVersion; else notSupported" class="devtools-wrapper noselect" [@enterAnimation]>
        <ng-devtools-tabs [angularVersion]="angularVersion"></ng-devtools-tabs>
      </div>
      <ng-template #notSupported>
        <p class="text-message">
          Angular Devtools only supports Angular versions 9 and above with
          <a href="https://angular.io/guide/ivy" target="_blank">ivy</a> enabled.
        </p>
      </ng-template>
    </ng-container>
    <ng-template #angularIsInProdMode>
      <p class="text-message">
        We detected an application built with production configuration. Angular DevTools only supports development
        builds.
      </p>
    </ng-template>
  </ng-container>
  <ng-template #errorOrLoading>
    <ng-container *ngIf="angularExists === false; else loading">
      <p class="text-message">
        Angular application not detected.
        <span
          class="info-icon"
          matTooltip="You see this message because the app is still loading, or this is not an Angular application"
          >i</span
        >
      </p>
    </ng-container>
    <ng-template #loading>
      <div class="initializing" *ngIf="angularExists === null">
        <div class="loading"></div>
      </div>
    </ng-template>
  </ng-template>
</div>