fix(@angular-devkit/build-angular): correctly resolve symlinked global styles entrypoints

With this change we resolve the global stylesheet entrypoint path to use the realpath instead of the symlink path.

Fixes #3500

Author: alan-agius4

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

@@ -51,6 +51,11 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
           resolvedPath = require.resolve(style.input, { paths: [root] });
         } catch {}
       }
+
+      if (!buildOptions.preserveSymlinks) {
+        resolvedPath = fs.realpathSync(resolvedPath);
+      }
+
       // Add style entry points.
       if (entryPoints[style.bundleName]) {
         entryPoints[style.bundleName].push(resolvedPath);

tests/legacy-cli/e2e/tests/build/styles/symlinked-global.ts

@@ -0,0 +1,34 @@
+import { symlinkSync } from 'fs';
+import { resolve } from 'path';
+import { expectFileToMatch, writeMultipleFiles } from '../../../utils/fs';
+import { ng } from '../../../utils/process';
+import { updateJsonFile } from '../../../utils/project';
+
+export default async function () {
+  await writeMultipleFiles({
+    'src/styles.scss': `p { color: red }`,
+    'src/styles-for-link.scss': `p { color: blue }`,
+  });
+
+  symlinkSync(
+    resolve('src/styles-for-link.scss'),
+    resolve('src/styles-linked.scss'),
+    'junction',
+  );
+
+  await updateJsonFile('angular.json', workspaceJson => {
+    const appArchitect = workspaceJson.projects['test-project'].architect;
+    appArchitect.build.options.styles = [
+      'src/styles.scss',
+      'src/styles-linked.scss',
+    ];
+  });
+
+  await ng('build');
+  await expectFileToMatch('dist/test-project/styles.css', 'red');
+  await expectFileToMatch('dist/test-project/styles.css', 'blue');
+
+  await ng('build', '--preserve-symlinks');
+  await expectFileToMatch('dist/test-project/styles.css', 'red');
+  await expectFileToMatch('dist/test-project/styles.css', 'blue');
+}