diff --git a/packages/@angular/cli/models/webpack-config.ts b/packages/@angular/cli/models/webpack-config.ts index 64173c60eb..4c5654d19b 100644 --- a/packages/@angular/cli/models/webpack-config.ts +++ b/packages/@angular/cli/models/webpack-config.ts @@ -78,7 +78,7 @@ export class NgCliWebpackConfig { const targetDefaults: any = { development: { environment: 'dev', - outputHashing: 'none', + outputHashing: 'media', sourcemap: true, extractCss: false }, diff --git a/tests/e2e/tests/build/css-urls.ts b/tests/e2e/tests/build/css-urls.ts index 64559d8bd6..4248769cfc 100644 --- a/tests/e2e/tests/build/css-urls.ts +++ b/tests/e2e/tests/build/css-urls.ts @@ -1,7 +1,9 @@ +import * as fs from 'fs'; import { ng } from '../../utils/process'; import { expectFileToMatch, expectFileToExist, + expectFileMatchToExist, writeMultipleFiles } from '../../utils/fs'; import { expectToFail } from '../../utils/utils'; @@ -33,24 +35,27 @@ export default function () { .then(() => ng('build', '--extract-css', '--aot')) // Check paths are correctly generated. .then(() => expectFileToMatch('dist/styles.bundle.css', - `url\('\/assets\/global-img-absolute\.svg'\)`)) - .then(() => expectFileToMatch('dist/styles.bundle.css', 'url\(global-img-relative.svg\)')) + /url\('\/assets\/global-img-absolute\.svg'\)/)) + .then(() => expectFileToMatch('dist/styles.bundle.css', + /url\(global-img-relative\.[0-9a-f]{20}\.svg\)/)) .then(() => expectFileToMatch('dist/main.bundle.js', - `url\(\\'\/assets\/component-img-absolute\.svg\\'\)`)) - .then(() => expectFileToMatch('dist/main.bundle.js', 'url\(component-img-relative\.svg\)')) + /url\(\\'\/assets\/component-img-absolute\.svg\\'\)/)) + .then(() => expectFileToMatch('dist/main.bundle.js', + /url\(component-img-relative\.[0-9a-f]{20}\.svg\)/)) // Check files are correctly created. .then(() => expectToFail(() => expectFileToExist('dist/global-img-absolute.svg'))) - .then(() => expectFileToExist('dist/global-img-relative.svg')) .then(() => expectToFail(() => expectFileToExist('dist/component-img-absolute.svg'))) - .then(() => expectFileToExist('dist/component-img-relative.svg')) + .then(() => expectFileMatchToExist('./dist', /global-img-relative\.[0-9a-f]{20}\.svg/)) + .then(() => expectFileMatchToExist('./dist', /component-img-relative\.[0-9a-f]{20}\.svg/)) // Also check with base-href and deploy-url flags. .then(() => ng('build', '--base-href=/base/', '--deploy-url=deploy/', '--extract-css', '--aot')) .then(() => expectFileToMatch('dist/styles.bundle.css', - `url\('\/base\/deploy\/assets\/global-img-absolute\.svg'\)`)) - .then(() => expectFileToMatch('dist/styles.bundle.css', 'url\(global-img-relative.svg\)')) + /url\('\/base\/deploy\/assets\/global-img-absolute\.svg'\)/)) + .then(() => expectFileToMatch('dist/styles.bundle.css', + /url\(global-img-relative\.[0-9a-f]{20}\.svg\)/)) .then(() => expectFileToMatch('dist/main.bundle.js', - `url\(\\'\/base\/deploy\/assets\/component-img-absolute\.svg\\'\)`)) + /url\(\\'\/base\/deploy\/assets\/component-img-absolute\.svg\\'\)/)) .then(() => expectFileToMatch('dist/main.bundle.js', - 'url\(deploy/component-img-relative\.svg\)')); + /url\(deploy\/component-img-relative\.[0-9a-f]{20}\.svg\)/)); } diff --git a/tests/e2e/tests/build/deploy-url.ts b/tests/e2e/tests/build/deploy-url.ts index d5b0ecb417..895a4f7f9e 100644 --- a/tests/e2e/tests/build/deploy-url.ts +++ b/tests/e2e/tests/build/deploy-url.ts @@ -16,7 +16,7 @@ export default function () { .then(() => ng('build', '--deploy-url=deployUrl/', '--extract-css')) .then(() => expectFileToMatch('dist/index.html', 'deployUrl/main.bundle.js')) // verify --deploy-url isn't applied to extracted css urls - .then(() => expectFileToMatch('dist/styles.bundle.css', 'url\(more.svg\)')) + .then(() => expectFileToMatch('dist/styles.bundle.css', /url\(more\.[0-9a-f]{20}\.svg\)/)) // verify option also works in config .then(() => updateJsonFile('.angular-cli.json', configJson => { const app = configJson['apps'][0]; @@ -27,5 +27,5 @@ export default function () { // verify --deploy-url is applied to non-extracted css urls .then(() => ng('build', '--deploy-url=deployUrl/', '--extract-css=false')) .then(() => expectFileToMatch('dist/styles.bundle.js', - '__webpack_require__.p \+ \"more.svg\"')); + /__webpack_require__.p \+ \"more\.[0-9a-f]{20}\.svg\"/)); } diff --git a/tests/e2e/tests/build/output-hashing.ts b/tests/e2e/tests/build/output-hashing.ts index a6c5392928..04ad28aca7 100644 --- a/tests/e2e/tests/build/output-hashing.ts +++ b/tests/e2e/tests/build/output-hashing.ts @@ -1,17 +1,10 @@ import {stripIndents} from 'common-tags'; -import * as fs from 'fs'; import {ng} from '../../utils/process'; -import { writeMultipleFiles, expectFileToMatch } from '../../utils/fs'; +import { writeMultipleFiles, expectFileToMatch, expectFileMatchToExist } from '../../utils/fs'; function verifyMedia(css: RegExp, content: RegExp) { - return new Promise((resolve, reject) => { - const [fileName] = fs.readdirSync('./dist').filter(name => name.match(css)); - if (!fileName) { - reject(new Error(`File ${fileName} was expected to exist but not found...`)); - } - resolve(fileName); - }) - .then(fileName => expectFileToMatch(`dist/${fileName}`, content)); + return expectFileMatchToExist('./dist', css) + .then(fileName => expectFileToMatch(`dist/${fileName}`, content)); } export default function() { diff --git a/tests/e2e/utils/fs.ts b/tests/e2e/utils/fs.ts index 4edb62b5a1..0a621f2c32 100644 --- a/tests/e2e/utils/fs.ts +++ b/tests/e2e/utils/fs.ts @@ -120,6 +120,16 @@ export function prependToFile(filePath: string, text: string, options?: any) { } +export function expectFileMatchToExist(dir: string, regex: RegExp) { + return new Promise((resolve, reject) => { + const [fileName] = fs.readdirSync(dir).filter(name => name.match(regex)); + if (!fileName) { + reject(new Error(`File ${regex} was expected to exist but not found...`)); + } + resolve(fileName); + }); +} + export function expectFileToExist(fileName: string) { return new Promise((resolve, reject) => { fs.exists(fileName, (exist) => {