mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
AleksanderBodurri
efe78d5565
Angular DevTools depends on many modern Angular features in order to function. As a result, at present the last officially supported version is v12. Angular DevTools may function for some Angular 9, 10 and 11 applications, but they are not officially supported. This commit fixes an issue where DevTools would not inject a backend script into an Angular application if it detected it was below version 12. This backend script is important because it's used to inform the DevTools panel that the inspected application is in fact Angular, but that it is not on a supported version. Angular 9, 10 and 11 applications that successfully have Angular DevTools initialize will now have a red highlight and tooltip on their version number, informing the user that they are using Angular DevTools on a version of Angular that is no longer supported. Angular DevTools for applications that are below version 9 will continue to display the "Angular Devtools supports Angular versions 12 and above" message. PR Close #55233
57 lines
3.0 KiB
HTML
57 lines
3.0 KiB
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 build.
|
|
</p>
|
|
}
|
|
}
|
|
@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>
|
|
|