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

<div class="devtools mat-typography mat-app-background" style="height: 100%;">
  @switch (angularStatus) {
    @case (AngularStatus.EXISTS) {
      @if (angularIsInDevMode) {
        @if (supportedVersion()) {
          <div class="devtools-wrapper noselect" [@enterAnimation]>
            <ng-devtools-tabs (frameSelected)="inspectFrame($event)" [isHydrationEnabled]="hydration" [angularVersion]="angularVersion()"></ng-devtools-tabs>
          </div>
        } @else {
          <p class="text-message">
            Angular Devtools only supports Angular versions 12 and above
          </p>
        }
      } @else {
        <p class="text-message" matTooltip="A dev build is when the `optimization` flag is set to `false` in the angular.json config file.">
          We detected an application built with production configuration. Angular DevTools only supports development builds.
        </p>
      
        <div class="ng-dev-mode-causes">
          <p>
            If this application was built in development mode, please check if the <code>window.ng</code> global object is available in your
            application. If it is missing, then something is preventing Angular from running in development mode properly.
          </p>
          <ul>
            <li>
              Are you calling <code>enableProdMode()</code> in your application? Read more about <a target="_blank" href="https://angular.dev/api/core/enableProdMode">enableProdMode()</a> on angular.dev.
            </li>
            <li>
              Is <code>"optimization": true</code> set in your angular.json? Read more about <a target="_blank" href="https://angular.dev/reference/configs/workspace-config#optimization-configuration">optimization configuration</a> on angular.dev.
            </li>
            <li>
              Is <code>"defaultConfiguration": "production"</code> set in your angular.json? Read more about <a target="_blank" href="https://angular.dev/tools/cli/environments#using-environment-specific-variables-in-your-app">default configurations</a> on angular.dev.
            </li>
          </ul>
          <p>
            If you are still experiencing problems, you can open an issue with a reproduction on our <a target="_blank" href="https://github.com/angular/angular/issues/new?assignees=&labels=&projects=&template=4-devtools.yaml">issue tracker</a>.
          </p>
        </div>      
      }
    }
    @case (AngularStatus.DOES_NOT_EXIST) {
      <p class="text-message 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>
          Angular application not detected.
      </p>
    }
    @case (AngularStatus.UNKNOWN) {
      <div class="initializing">
        <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>
    }
  }
</div>