fix(@angular-devkit/build-angular): generate unique webpack runtimes

Currently, using 2 Angular applications from the same workspace on the same page causes a conflict because both of the webpack runtime chunks naming are the same.

With this change we configure the runtime chunk name to be inferred from the project name. This also results in reducing unnecessary file reads which Webpack needs to do to infer the name from the workspace package.json.

For more information about this option see: https://webpack.js.org/configuration/output/#outputuniquename

Closes #21957

(cherry picked from commit 1dac761)

Author: alan-agius4

packages/angular_devkit/build_angular/src/builders/dev-server/tests/behavior/build-deploy-url_spec.ts

@@ -33,7 +33,7 @@ describeBuilder(serveWebpackBrowser, DEV_SERVER_BUILDER_INFO, (harness) => {
       expect(result?.success).toBeTrue();
       expect(result?.baseUrl).toMatch(/\/test$/);
       expect(response?.url).toMatch(/\/test\/runtime.js$/);
-      expect(await response?.text()).toContain('self["webpackChunk"]');
+      expect(await response?.text()).toContain('self["webpackChunktest"]');
     });
   });
 });

packages/angular_devkit/build_angular/src/builders/dev-server/tests/options/serve-path_spec.ts

@@ -35,7 +35,7 @@ describeBuilder(serveWebpackBrowser, DEV_SERVER_BUILDER_INFO, (harness) => {
       expect(result?.success).toBeTrue();
       const baseUrl = new URL(`${result?.baseUrl}`);
       expect(baseUrl.pathname).toBe('/');
-      expect(await response?.text()).toContain('self["webpackChunk"]');
+      expect(await response?.text()).toContain('self["webpackChunktest"]');
     });
 
     it('serves application at specified path when option is used', async () => {
@@ -49,7 +49,7 @@ describeBuilder(serveWebpackBrowser, DEV_SERVER_BUILDER_INFO, (harness) => {
       expect(result?.success).toBeTrue();
       const baseUrl = new URL(`${result?.baseUrl}/`);
       expect(baseUrl.pathname).toBe('/test/');
-      expect(await response?.text()).toContain('self["webpackChunk"]');
+      expect(await response?.text()).toContain('self["webpackChunktest"]');
     });
 
     it('does not rewrite from root when option is used', async () => {

packages/angular_devkit/build_angular/src/utils/build-options.ts

@@ -89,4 +89,5 @@ export interface WebpackConfigOptions<T = BuildOptions> {
   tsConfig: ParsedConfiguration;
   tsConfigPath: string;
   scriptTarget: import('typescript').ScriptTarget;
+  projectName: string;
 }

packages/angular_devkit/build_angular/src/utils/webpack-browser-config.ts

@@ -29,6 +29,7 @@ export async function generateWebpackConfig(
   workspaceRoot: string,
   projectRoot: string,
   sourceRoot: string | undefined,
+  projectName: string,
   options: NormalizedBrowserBuilderSchema,
   webpackPartialGenerator: WebpackPartialGenerator,
   logger: logging.LoggerApi,
@@ -54,6 +55,7 @@ export async function generateWebpackConfig(
     buildOptions,
     tsConfig,
     tsConfigPath,
+    projectName,
     scriptTarget,
   };
 
@@ -164,6 +166,7 @@ export async function generateBrowserWebpackConfigFromContext(
     getSystemPath(workspaceRoot),
     getSystemPath(projectRoot),
     sourceRoot && getSystemPath(sourceRoot),
+    projectName,
     normalizedOptions,
     webpackPartialGenerator,
     context.logger,

packages/angular_devkit/build_angular/src/webpack/configs/common.ts

@@ -33,7 +33,7 @@ import { getOutputHashFormat, getWatchOptions, normalizeExtraEntryPoints } from
 
 // eslint-disable-next-line max-lines-per-function
 export async function getCommonConfig(wco: WebpackConfigOptions): Promise<Configuration> {
-  const { root, projectRoot, buildOptions, tsConfig } = wco;
+  const { root, projectRoot, buildOptions, tsConfig, projectName } = wco;
   const {
     cache,
     platform = 'browser',
@@ -337,6 +337,7 @@ export async function getCommonConfig(wco: WebpackConfigOptions): Promise<Config
     context: root,
     entry: entryPoints,
     output: {
+      uniqueName: projectName,
       hashFunction: 'xxhash64', // todo: remove in webpack 6. This is part of `futureDefaults`.
       clean: buildOptions.deleteOutputPath ?? true,
       path: path.resolve(root, buildOptions.outputPath),