fix(@angular/cli): allow the use of a base-href with scheme

Author: Charles Lyding

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

@@ -56,6 +56,10 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
       if (deployUrl.match(/:\/\//)) {
         // If deployUrl contains a scheme, ignore baseHref use deployUrl as is.
         return `${deployUrl.replace(/\/$/, '')}${URL}`;
+      } else if (baseHref.match(/:\/\//)) {
+        // If baseHref contains a scheme, include it as is.
+        return baseHref.replace(/\/$/, '') +
+               `/${deployUrl}/${URL}`.replace(/\/\/+/g, '/');
       } else {
         // Join together base-href, deploy-url and the original URL.
         // Also dedupe multiple slashes into single ones.

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

@@ -47,13 +47,27 @@ export default function () {
     .then(() => expectToFail(() => expectFileToExist('dist/component-img-absolute.svg')))
     .then(() => expectFileMatchToExist('./dist', /global-img-relative\.[0-9a-f]{20}\.svg/))
     .then(() => expectFileMatchToExist('./dist', /component-img-relative\.[0-9a-f]{20}\.svg/))
-    // Check urls with scheme are used as is.
+    // Check urls with deploy-url scheme are used as is.
     .then(() => ng('build', '--base-href=/base/', '--deploy-url=http://deploy.url/',
       '--extract-css'))
     .then(() => expectFileToMatch('dist/styles.bundle.css',
       /url\(\'http:\/\/deploy\.url\/assets\/global-img-absolute\.svg\'\)/))
     .then(() => expectFileToMatch('dist/main.bundle.js',
       /url\(\'http:\/\/deploy\.url\/assets\/component-img-absolute\.svg\'\)/))
+    // Check urls with base-href scheme are used as is (with deploy-url).
+    .then(() => ng('build', '--base-href=http://base.url/', '--deploy-url=deploy/',
+      '--extract-css'))
+    .then(() => expectFileToMatch('dist/styles.bundle.css',
+      /url\(\'http:\/\/base\.url\/deploy\/assets\/global-img-absolute\.svg\'\)/))
+    .then(() => expectFileToMatch('dist/main.bundle.js',
+      /url\(\'http:\/\/base\.url\/deploy\/assets\/component-img-absolute\.svg\'\)/))
+    // Check urls with deploy-url and base-href scheme only use deploy-url.
+    .then(() => ng('build', '--base-href=http://base.url/', '--deploy-url=http://deploy.url/',
+      '--extract-css'))
+    .then(() => expectFileToMatch('dist/styles.bundle.css',
+      /url\(\'http:\/\/deploy\.url\/assets\/global-img-absolute\.svg\'\)/))
+    .then(() => expectFileToMatch('dist/main.bundle.js',
+      /url\(\'http:\/\/deploy\.url\/assets\/component-img-absolute\.svg\'\)/))
     // Check with base-href and deploy-url flags.
     .then(() => ng('build', '--base-href=/base/', '--deploy-url=deploy/',
       '--extract-css', '--aot'))