diff --git a/packages/@angular/cli/models/webpack-configs/styles.ts b/packages/@angular/cli/models/webpack-configs/styles.ts index d609cd4b86ef..a08e52ee7be4 100644 --- a/packages/@angular/cli/models/webpack-configs/styles.ts +++ b/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. diff --git a/tests/e2e/tests/build/css-urls.ts b/tests/e2e/tests/build/css-urls.ts index 80a49862f662..571ef73369d5 100644 --- a/tests/e2e/tests/build/css-urls.ts +++ b/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'))