refactor(@angular/build): add console message to dev server when component HMR is enabled

An informational message has been added to the development server to ensure
that users are aware that component HMR has been enabled and provide actionable
steps in the event that an application reload may not behave as expected.

Author: clydin

packages/angular/build/src/builders/dev-server/tests/options/hmr_spec.ts

@@ -0,0 +1,63 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import { logging } from '@angular-devkit/core';
+import { executeDevServer } from '../../index';
+import { executeOnceAndFetch } from '../execute-fetch';
+import { describeServeBuilder } from '../jasmine-helpers';
+import { BASE_OPTIONS, DEV_SERVER_BUILDER_INFO } from '../setup';
+
+describeServeBuilder(executeDevServer, DEV_SERVER_BUILDER_INFO, (harness, setupTarget) => {
+  describe('option: "hmr"', () => {
+    beforeEach(async () => {
+      setupTarget(harness, {});
+    });
+
+    it('shows message with opt out steps when enabled', async () => {
+      harness.useTarget('serve', {
+        ...BASE_OPTIONS,
+        hmr: true,
+      });
+
+      const { result, logs } = await executeOnceAndFetch(harness, '/');
+
+      expect(result?.success).toBeTrue();
+      expect(logs).toContain(
+        jasmine.objectContaining<logging.LogEntry>({
+          message: jasmine.stringMatching('Component HMR has been enabled'),
+        }),
+      );
+      expect(logs).toContain(
+        jasmine.objectContaining<logging.LogEntry>({
+          message: jasmine.stringMatching('--no-hmr'),
+        }),
+      );
+    });
+
+    it('does not show enabled message with opt out steps when disabled', async () => {
+      harness.useTarget('serve', {
+        ...BASE_OPTIONS,
+        hmr: true,
+      });
+
+      const { result, logs } = await executeOnceAndFetch(harness, '/');
+
+      expect(result?.success).toBeTrue();
+      expect(logs).toContain(
+        jasmine.objectContaining<logging.LogEntry>({
+          message: jasmine.stringMatching('Component HMR has been enabled'),
+        }),
+      );
+      expect(logs).toContain(
+        jasmine.objectContaining<logging.LogEntry>({
+          message: jasmine.stringMatching('--no-hmr'),
+        }),
+      );
+    });
+  });
+});

packages/angular/build/src/builders/dev-server/vite-server.ts

@@ -151,6 +151,13 @@ export async function* serveWithVite(
   // This will also replace file-based/inline styles as code if external runtime styles are not enabled.
   browserOptions.templateUpdates =
     serverOptions.liveReload && serverOptions.hmr && useComponentTemplateHmr;
+  if (browserOptions.templateUpdates) {
+    context.logger.warn(
+      'Component HMR has been enabled.\n' +
+        'If you encounter application reload issues, you can manually reload the page to bypass HMR and/or disable this feature with the `--no-hmr` command line option.\n' +
+        'Please consider reporting any issues you encounter here: https://github.com/angular/angular-cli/issues\n',
+    );
+  }
 
   browserOptions.incrementalResults = true;