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 xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 223 236" width="120">
            <g clip-path="url(#a)">
              <path fill="url(#b)" d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"></path>
              <path fill="url(#c)" d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"></path>
            </g>
            <defs>
              <linearGradient id="b" x1="49.009" x2="225.829" y1="213.75" y2="129.722" gradientUnits="userSpaceOnUse">
                <stop stop-color="#E40035"></stop>
                <stop offset=".24" stop-color="#F60A48"></stop>
                <stop offset=".352" stop-color="#F20755"></stop>
                <stop offset=".494" stop-color="#DC087D"></stop>
                <stop offset=".745" stop-color="#9717E7"></stop>
                <stop offset="1" stop-color="#6C00F5"></stop>
              </linearGradient>
              <linearGradient id="c" x1="41.025" x2="156.741" y1="28.344" y2="160.344" gradientUnits="userSpaceOnUse">
                <stop stop-color="#FF31D9"></stop>
                <stop offset="1" stop-color="#FF5BE1" stop-opacity="0"></stop>
              </linearGradient>
              <clipPath id="a">
                <path fill="#fff" d="M0 0h223v236H0z"></path>
              </clipPath>
            </defs>
          </svg>
        </div>
      </div>
    </ng-template>
  </ng-template>
</div>