fix(@angular/build): support quotes in styles and polyfills paths

The application builder generated the global styles and polyfills entry modules by
wrapping each configured path in single quotes without escaping. A path containing a
single quote, such as `src/dev's theme/theme.css`, produced an invalid import and the
build failed with "Could not resolve" or a syntax error.

Generate the import specifiers with `JSON.stringify` so that such paths are quoted
correctly.

Author: MeAkib

packages/angular/build/src/builders/application/tests/options/polyfills_spec.ts

@@ -61,6 +61,21 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
           harness.expectFile('dist/browser/polyfills.js').content.toContain(`console.log("main")`);
         });
 
+        it('uses a provided file with a single quote in its path', async () => {
+          await harness.writeFile(`src/dev's polyfills/polyfills.js`, `console.log('main');`);
+
+          harness.useTarget('build', {
+            ...BASE_OPTIONS,
+            polyfills: [`src/dev's polyfills/polyfills.js`],
+          });
+
+          const { result } = await harness.executeOnce();
+
+          expect(result?.success).toBe(true);
+
+          harness.expectFile('dist/browser/polyfills.js').content.toContain(`console.log("main")`);
+        });
+
         it('fails and shows an error when file does not exist', async () => {
           harness.useTarget('build', {
             ...BASE_OPTIONS,

packages/angular/build/src/builders/application/tests/options/styles_spec.ts

@@ -62,6 +62,23 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
           .content.toContain('<link rel="stylesheet" href="styles.css">');
       });
 
+      it('processes a style with a single quote in its path', async () => {
+        await harness.writeFile(`src/dev's theme/test-style-a.css`, '.test-a {color: red}');
+
+        harness.useTarget('build', {
+          ...BASE_OPTIONS,
+          styles: [`src/dev's theme/test-style-a.css`],
+        });
+
+        const { result } = await harness.executeOnce();
+
+        expect(result?.success).toBe(true);
+
+        harness
+          .expectFile('dist/browser/styles.css')
+          .content.toMatch(/\.test-a {\s*color: red;?\s*}/);
+      });
+
       it('processes multiple styles into a single output', async () => {
         await harness.writeFiles({
           'src/test-style-a.css': '.test-a {color: red}',

packages/angular/build/src/tools/esbuild/application-code-bundle.ts

@@ -740,7 +740,9 @@ function getEsBuildCommonPolyfillsOptions(
         }
 
         // Generate module contents with an import statement per defined polyfill
-        let contents = polyfillPaths.map((file) => `import '${toPosixPath(file)}';`).join('\n');
+        let contents = polyfillPaths
+          .map((file) => `import ${JSON.stringify(toPosixPath(file))};`)
+          .join('\n');
 
         // The below should be done after loading `$localize` as otherwise the locale will be overridden.
         if (i18nOptions.shouldInline) {

packages/angular/build/src/tools/esbuild/global-styles.ts

@@ -92,7 +92,9 @@ export function createGlobalStylesBundleOptions(
           assert(files, `global style name should always be found [${args.path}]`);
 
           return {
-            contents: files.map((file) => `@import '${toPosixPath(file)}';`).join('\n'),
+            contents: files
+              .map((file) => `@import ${JSON.stringify(toPosixPath(file))};`)
+              .join('\n'),
             loader: 'css',
             resolveDir: workspaceRoot,
           };