angular/devtools/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 12 and above
        </p>
      </ng-template>
    </ng-container>
    <ng-template #angularIsInProdMode>
      <p class="text-message" title="A dev build is when the `optimization` flag is set to `true` in the angular.json config file.">
        We detected an application built with production configuration. Angular DevTools only supports development build.
      </p>
    </ng-template>
  </ng-container>
  <ng-template #errorOrLoading>
    <ng-container *ngIf="angularExists === false; else loading">
      <p class="text-message">
        <span class="info-icon" matTooltip="You see this message because the app is still loading, or this is not an Angular application">i</span
        >
        Angular application not detected.
      </p>
    </ng-container>
    <ng-template #loading>
      <div class="initializing" *ngIf="angularExists === null">
        <div class="loading">
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
              viewBox="0 0 250 250" style="enable-background:new 0 0 250 250;" xml:space="preserve">
            <style type="text/css">
              .st0{fill:#DD0031;}
              .st1{fill:#C3002F;}
              .st2{fill:#FFFFFF;}
            </style>
            <g>
              <polygon class="st0" points="125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2 	"/>
              <polygon class="st1" points="125,30 125,52.2 125,52.1 125,153.4 125,153.4 125,230 125,230 203.9,186.3 218.1,63.2 125,30 	"/>
              <path class="st2" d="M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1
                L125,52.1z M142,135.4H108l17-40.9L142,135.4z"/>
            </g>
            </svg>
        </div>
      </div>
    </ng-template>
  </ng-template>
</div>