fix(@angular/cli): account for root relative URLs in CSS assets

Author: clydin

packages/@angular/cli/models/webpack-configs/styles.ts

@@ -63,8 +63,8 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
           // Only convert root relative URLs, which CSS-Loader won't process into require().
           filter: ({ url }: { url: string }) => url.startsWith('/') && !url.startsWith('//'),
           url: ({ url }: { url: string }) => {
-            if (deployUrl.match(/:\/\//)) {
-              // If deployUrl contains a scheme, ignore baseHref use deployUrl as is.
+            if (deployUrl.match(/:\/\//) || deployUrl.startsWith('/')) {
+              // If deployUrl is absolute or root relative, ignore baseHref & use deployUrl as is.
               return `${deployUrl.replace(/\/$/, '')}${url}`;
             } else if (baseHref.match(/:\/\//)) {
               // If baseHref contains a scheme, include it as is.

tests/e2e/tests/build/css-urls.ts

@@ -79,5 +79,27 @@ export default function () {
     .then(() => expectFileToMatch('dist/main.bundle.js',
       '/base/deploy/assets/component-img-absolute.svg'))
     .then(() => expectFileToMatch('dist/main.bundle.js',
-      /deploy\/component-img-relative\.[0-9a-f]{20}\.png/));
+      /deploy\/component-img-relative\.[0-9a-f]{20}\.png/))
+    // Check with identical base-href and deploy-url flags.
+    .then(() => ng('build', '--base-href=/base/', '--deploy-url=/base/',
+      '--extract-css', '--aot'))
+    .then(() => expectFileToMatch('dist/styles.bundle.css',
+      '/base/assets/global-img-absolute.svg'))
+    .then(() => expectFileToMatch('dist/styles.bundle.css',
+      /global-img-relative\.[0-9a-f]{20}\.png/))
+    .then(() => expectFileToMatch('dist/main.bundle.js',
+      '/base/assets/component-img-absolute.svg'))
+    .then(() => expectFileToMatch('dist/main.bundle.js',
+      /\/base\/component-img-relative\.[0-9a-f]{20}\.png/))
+    // Check with only base-href flag.
+    .then(() => ng('build', '--base-href=/base/',
+      '--extract-css', '--aot'))
+    .then(() => expectFileToMatch('dist/styles.bundle.css',
+      '/base/assets/global-img-absolute.svg'))
+    .then(() => expectFileToMatch('dist/styles.bundle.css',
+      /global-img-relative\.[0-9a-f]{20}\.png/))
+    .then(() => expectFileToMatch('dist/main.bundle.js',
+      '/base/assets/component-img-absolute.svg'))
+    .then(() => expectFileToMatch('dist/main.bundle.js',
+      /component-img-relative\.[0-9a-f]{20}\.png/));
 }