feat(@angular/build): enable component template hot replacement by default

When using the `application` builder (default for new projects) with the
development server, component template only changes will now automatically
replace the template within the running application without a full reload
of the page. No application code changes are necessary and both file-based
(`templateUrl`) and inline (`template`) component templates are supported.
Additionally, changing a components styles in combination with a template
change is also supported for hot replacement. This includes both inline and
file-based changes.

If any issues are encountered or it is preferred to not hot replace component
templates, the `NG_HMR_TEMPLATES=0` environment variable can be used to disable
the feature. Setting the `liveReload` option or `hmr` option to false will
also disable all updates.

Author: clydin

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

@@ -138,17 +138,14 @@ export async function* serveWithVite(
     process.setSourceMapsEnabled(true);
   }
 
-  // Enable to support component style hot reloading (`NG_HMR_CSTYLES=0` can be used to disable selectively)
+  // Enable to support link-based component style hot reloading (`NG_HMR_CSTYLES=0` can be used to disable selectively)
   browserOptions.externalRuntimeStyles =
     serverOptions.liveReload && serverOptions.hmr && useComponentStyleHmr;
 
-  // Enable to support component template hot replacement (`NG_HMR_TEMPLATE=1` can be used to enable)
-  browserOptions.templateUpdates = !!serverOptions.liveReload && useComponentTemplateHmr;
-  if (browserOptions.templateUpdates) {
-    context.logger.warn(
-      'Experimental support for component template hot replacement has been enabled via the "NG_HMR_TEMPLATE" environment variable.',
-    );
-  }
+  // Enable to support component template hot replacement (`NG_HMR_TEMPLATE=0` can be used to disable selectively)
+  // This will also replace file-based/inline styles as code if external runtime styles are not enabled.
+  browserOptions.templateUpdates =
+    serverOptions.liveReload && serverOptions.hmr && useComponentTemplateHmr;
 
   // Setup the prebundling transformer that will be shared across Vite prebundling requests
   const prebundleTransformer = new JavaScriptTransformer(

packages/angular/build/src/utils/environment-options.ts

@@ -107,7 +107,7 @@ export const useComponentStyleHmr =
 
 const hmrComponentTemplateVariable = process.env['NG_HMR_TEMPLATES'];
 export const useComponentTemplateHmr =
-  isPresent(hmrComponentTemplateVariable) && isEnabled(hmrComponentTemplateVariable);
+  !isPresent(hmrComponentTemplateVariable) || !isDisabled(hmrComponentTemplateVariable);
 
 const partialSsrBuildVariable = process.env['NG_BUILD_PARTIAL_SSR'];
 export const usePartialSsrBuild =