refactor(devtools): provide user with suggestions on why their angular application is not being detected in dev mode (angular#57861)

AleksanderBodurri · pkozlowski-opensource · commit 9f4063b14373 · 2024-09-23T16:08:16.000+02:00
We've been seeing some reports about Angular DevTools being unable to detect applications running in dev mode. This commit adds more context to the error message displayed when development mode is not detected and offers some possible resolutions. Displays 3 common reasons why DevTools fails to detect an application running in dev mode. Links directly to angular.dev for relevant configurations. Links to the Angular DevTools issue template if none of the suggestions work. PR Close angular#57861
diff --git a/devtools/projects/ng-devtools/src/lib/devtools.component.html b/devtools/projects/ng-devtools/src/lib/devtools.component.html
@@ -13,8 +13,29 @@
         }
       } @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.
+          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) {
diff --git a/devtools/projects/ng-devtools/src/lib/devtools.component.scss b/devtools/projects/ng-devtools/src/lib/devtools.component.scss
@@ -215,3 +215,24 @@
     color: #000;
   }
 }
+
+.ng-dev-mode-causes {
+  font-weight: 500;
+  font-size: 1.2em;
+  padding: 1rem;
+  width: 80%;
+  margin: auto;
+  border: 1px solid;
+  border-radius: 16px;
+
+  code {
+    padding: 2px;
+    color: lightgreen;
+    background: #3e3e3e;
+    border-radius: 5px;
+  }
+
+  li {
+    margin-bottom: 1rem;
+  }
+}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools_spec.ts b/devtools/projects/ng-devtools/src/lib/devtools_spec.ts
@@ -55,7 +55,7 @@ describe('DevtoolsComponent', () => {
     component.angularIsInDevMode = false;
     fixture.detectChanges();
     expect(fixture.nativeElement.querySelector('.devtools').textContent).toContain(
-      'We detected an application built with production configuration. Angular DevTools only supports development build.',
+      'We detected an application built with production configuration. Angular DevTools only supports development builds.',
     );
   });
 
