From b7a7cc172563dd4aa94ae3214b3553239eb47d1f Mon Sep 17 00:00:00 2001 From: Charles Lyding <19598772+clydin@users.noreply.github.com> Date: Wed, 14 Feb 2018 19:35:48 -0500 Subject: [PATCH] feat(@angular/cli): shorten output filenames --- .../stories/universal-rendering.md | 6 +- package-lock.json | 16 ------ .../cli/models/webpack-configs/browser.ts | 2 +- .../cli/models/webpack-configs/common.ts | 5 +- .../cli/models/webpack-configs/styles.ts | 4 +- .../@angular/cli/plugins/karma-context.html | 10 ++-- .../@angular/cli/plugins/karma-debug.html | 10 ++-- packages/@angular/cli/plugins/karma.ts | 8 +-- .../@angular/cli/tasks/render-universal.ts | 2 +- .../webpack/src/angular_compiler_plugin.ts | 2 +- tests/e2e/tests/basic/aot.ts | 2 +- tests/e2e/tests/basic/dev-build.ts | 2 +- tests/e2e/tests/basic/rebuild.ts | 4 +- tests/e2e/tests/basic/scripts-array.ts | 40 ++++++------- tests/e2e/tests/basic/styles-array.ts | 22 ++++---- tests/e2e/tests/build/aot/aot-decorators.ts | 6 +- tests/e2e/tests/build/aot/aot-i18n.ts | 8 +-- tests/e2e/tests/build/aot/aot-rebuild.ts | 4 +- tests/e2e/tests/build/css-urls.ts | 46 +++++++-------- tests/e2e/tests/build/deploy-url.ts | 14 ++--- tests/e2e/tests/build/dynamic-import.ts | 2 +- tests/e2e/tests/build/environment.ts | 2 +- tests/e2e/tests/build/output-dir.ts | 4 +- tests/e2e/tests/build/output-hashing.ts | 32 +++++------ tests/e2e/tests/build/platform-server.ts | 12 ++-- tests/e2e/tests/build/polyfills.ts | 8 +-- tests/e2e/tests/build/prod-build.ts | 6 +- tests/e2e/tests/build/rebuild-ngfactories.ts | 8 +-- tests/e2e/tests/build/script-target.ts | 2 +- tests/e2e/tests/build/sourcemap.ts | 8 +-- tests/e2e/tests/build/styles/extract-css.ts | 56 +++++++++---------- tests/e2e/tests/build/styles/imports.ts | 10 ++-- tests/e2e/tests/build/styles/include-paths.ts | 24 ++++---- tests/e2e/tests/build/styles/inline-urls.ts | 10 ++-- tests/e2e/tests/build/styles/less.ts | 8 +-- tests/e2e/tests/build/styles/loaders.ts | 4 +- tests/e2e/tests/build/styles/postcss.ts | 4 +- tests/e2e/tests/build/styles/scss.ts | 8 +-- tests/e2e/tests/build/styles/stylus.ts | 8 +-- .../build/vendor-chunk-symlink-node-module.ts | 2 +- tests/e2e/tests/build/vendor-chunk.ts | 4 +- tests/e2e/tests/i18n/build-locale.ts | 8 +-- tests/e2e/tests/misc/common-async.ts | 2 + tests/e2e/tests/misc/deploy-url.ts | 2 +- tests/e2e/tests/misc/lazy-module.ts | 13 ++--- tests/e2e/tests/third-party/bootstrap.ts | 26 ++++----- 46 files changed, 236 insertions(+), 250 deletions(-) diff --git a/docs/documentation/stories/universal-rendering.md b/docs/documentation/stories/universal-rendering.md index cd8d424beac4..afe864fc3ce9 100644 --- a/docs/documentation/stories/universal-rendering.md +++ b/docs/documentation/stories/universal-rendering.md @@ -72,7 +72,7 @@ import {AppComponent} from './app.component'; // The AppServerModule should import your AppModule followed // by the ServerModule from @angular/platform-server. AppModule, - ServerModule, + ServerModule, ModuleMapLoaderModule // <-- *Important* to have lazy-loaded routes work ], // Since the bootstrapped component is not inherited from your @@ -191,8 +191,8 @@ $ ng build --prod --app 1 --output-hashing=false Date: 2017-07-24T22:42:09.739Z Hash: 9cac7d8e9434007fd8da Time: 4933ms -chunk {0} main.bundle.js (main) 9.49 kB [entry] [rendered] -chunk {1} styles.bundle.css (styles) 0 bytes [entry] [rendered] +chunk {0} main.js (main) 9.49 kB [entry] [rendered] +chunk {1} styles.css (styles) 0 bytes [entry] [rendered] ``` --- diff --git a/package-lock.json b/package-lock.json index 81934c73b99d..bb8dd986d188 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2543,17 +2543,6 @@ "once": "1.4.0" } }, - "enhanced-resolve": { - "version": "3.4.1", - "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-3.4.1.tgz", - "integrity": "sha1-BCHjOf1xQZs9oT0Smzl5BAIwR24=", - "requires": { - "graceful-fs": "4.1.11", - "memory-fs": "0.4.1", - "object-assign": "4.1.1", - "tapable": "0.2.8" - } - }, "entities": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.1.tgz", @@ -8827,11 +8816,6 @@ } } }, - "tapable": { - "version": "0.2.8", - "resolved": "https://registry.npmjs.org/tapable/-/tapable-0.2.8.tgz", - "integrity": "sha1-mTcqXJmb8t8WCvwNdL7U9HlIzSI=" - }, "tar": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/tar/-/tar-4.1.1.tgz", diff --git a/packages/@angular/cli/models/webpack-configs/browser.ts b/packages/@angular/cli/models/webpack-configs/browser.ts index 6529ce366378..c652e9e8cf94 100644 --- a/packages/@angular/cli/models/webpack-configs/browser.ts +++ b/packages/@angular/cli/models/webpack-configs/browser.ts @@ -82,7 +82,7 @@ export function getBrowserConfig(wco: WebpackConfigOptions) { crossOriginLoading: buildOptions.subresourceIntegrity ? 'anonymous' : false }, optimization: { - // runtimeChunk: 'single', + runtimeChunk: 'single', splitChunks: { chunks: buildOptions.commonChunk ? 'all' : 'initial', cacheGroups: { diff --git a/packages/@angular/cli/models/webpack-configs/common.ts b/packages/@angular/cli/models/webpack-configs/common.ts index dbcf27b78113..773ddea97898 100644 --- a/packages/@angular/cli/models/webpack-configs/common.ts +++ b/packages/@angular/cli/models/webpack-configs/common.ts @@ -70,7 +70,7 @@ export function getCommonConfig(wco: WebpackConfigOptions) { extraPlugins.push(new ScriptsWebpackPlugin({ name: script.entry, sourceMap: buildOptions.sourcemaps, - filename: `${script.entry}${hash}.bundle.js`, + filename: `${script.entry}${hash}.js`, scripts: script.paths, basePath: projectRoot, })); @@ -215,8 +215,7 @@ export function getCommonConfig(wco: WebpackConfigOptions) { output: { path: path.resolve(buildOptions.outputPath), publicPath: buildOptions.deployUrl, - filename: `[name]${hashFormat.chunk}.bundle.js`, - chunkFilename: `[id]${hashFormat.chunk}.chunk.js` + filename: `[name]${hashFormat.chunk}.js`, }, module: { rules: [ diff --git a/packages/@angular/cli/models/webpack-configs/styles.ts b/packages/@angular/cli/models/webpack-configs/styles.ts index 047e878fc0da..f2595906b2f3 100644 --- a/packages/@angular/cli/models/webpack-configs/styles.ts +++ b/packages/@angular/cli/models/webpack-configs/styles.ts @@ -265,12 +265,14 @@ export function getStylesConfig(wco: WebpackConfigOptions) { if (buildOptions.extractCss) { // extract global css from js files into own css file extraPlugins.push( - new ExtractTextPlugin({ filename: `[name]${hashFormat.extract}.bundle.css` })); + new ExtractTextPlugin({ filename: `[name]${hashFormat.extract}.css` })); // suppress empty .js files in css only entry points extraPlugins.push(new SuppressExtractedTextChunksWebpackPlugin()); } return { + // Workaround stylus-loader defect: https://github.com/shama/stylus-loader/issues/189 + loader: { stylus: {} }, entry: entryPoints, module: { rules }, plugins: [].concat(extraPlugins) diff --git a/packages/@angular/cli/plugins/karma-context.html b/packages/@angular/cli/plugins/karma-context.html index 1c8f49c653f5..ec185d8d3e60 100644 --- a/packages/@angular/cli/plugins/karma-context.html +++ b/packages/@angular/cli/plugins/karma-context.html @@ -26,13 +26,13 @@ // All served files with the latest timestamps %MAPPINGS% - - + + %SCRIPTS% - - - + + + diff --git a/packages/@angular/cli/plugins/karma-debug.html b/packages/@angular/cli/plugins/karma-debug.html index 649d59817e04..4f49e825a3d4 100644 --- a/packages/@angular/cli/plugins/karma-debug.html +++ b/packages/@angular/cli/plugins/karma-debug.html @@ -28,13 +28,13 @@ // All served files with the latest timestamps %MAPPINGS% - - + + %SCRIPTS% - - - + + + diff --git a/packages/@angular/cli/plugins/karma.ts b/packages/@angular/cli/plugins/karma.ts index c2e992755256..0e3f6a067484 100644 --- a/packages/@angular/cli/plugins/karma.ts +++ b/packages/@angular/cli/plugins/karma.ts @@ -207,10 +207,10 @@ const init: any = (config: any, emitter: any, customFileHandlers: any) => { // Ensure script and style bundles are served. // They are mentioned in the custom karma context page and we don't want them to 404. const alwaysServe = [ - '/_karma_webpack_/inline.bundle.js', - '/_karma_webpack_/polyfills.bundle.js', - '/_karma_webpack_/scripts.bundle.js', - '/_karma_webpack_/vendor.bundle.js', + '/_karma_webpack_/runtime.js', + '/_karma_webpack_/polyfills.js', + '/_karma_webpack_/scripts.js', + '/_karma_webpack_/vendor.js', ]; if (alwaysServe.indexOf(req.url) != -1) { res.statusCode = 200; diff --git a/packages/@angular/cli/tasks/render-universal.ts b/packages/@angular/cli/tasks/render-universal.ts index 01e3bc1d5eb2..c9f6238a612e 100644 --- a/packages/@angular/cli/tasks/render-universal.ts +++ b/packages/@angular/cli/tasks/render-universal.ts @@ -21,7 +21,7 @@ export default Task.extend({ // Get the main bundle from the server build's output directory. const serverDir = fs.readdirSync(options.serverOutDir); const serverMainBundle = serverDir - .filter((file: string) => /main\.(?:[a-zA-Z0-9]{20}\.)?bundle\.js/.test(file))[0]; + .filter((file: string) => /main\.(?:[a-zA-Z0-9]{20}\.)?js/.test(file))[0]; const serverBundlePath = join(options.serverOutDir, serverMainBundle); const AppServerModuleNgFactory = require(serverBundlePath).AppServerModuleNgFactory; diff --git a/packages/@ngtools/webpack/src/angular_compiler_plugin.ts b/packages/@ngtools/webpack/src/angular_compiler_plugin.ts index 1bda452d83ac..103065f00d00 100644 --- a/packages/@ngtools/webpack/src/angular_compiler_plugin.ts +++ b/packages/@ngtools/webpack/src/angular_compiler_plugin.ts @@ -589,7 +589,7 @@ export class AngularCompilerPlugin { const modulePath = this._lazyRoutes[key]; const importPath = key.split('#')[0]; if (modulePath !== null) { - const name = path.basename(importPath).replace(/(\.ngfactory)?\.(js|ts)$/, ''); + const name = importPath.replace(/(\.ngfactory)?\.(js|ts)$/, ''); return new ContextElementDependency(modulePath, name); } else { return null; diff --git a/tests/e2e/tests/basic/aot.ts b/tests/e2e/tests/basic/aot.ts index 5ec34d6d563d..eaeb570d86cb 100644 --- a/tests/e2e/tests/basic/aot.ts +++ b/tests/e2e/tests/basic/aot.ts @@ -3,6 +3,6 @@ import {expectFileToMatch} from '../../utils/fs'; export default function() { return ng('build', '--aot') - .then(() => expectFileToMatch('dist/main.bundle.js', + .then(() => expectFileToMatch('dist/main.js', /platformBrowser.*bootstrapModuleFactory.*AppModuleNgFactory/)); } diff --git a/tests/e2e/tests/basic/dev-build.ts b/tests/e2e/tests/basic/dev-build.ts index 34729084b075..454722cd69bc 100644 --- a/tests/e2e/tests/basic/dev-build.ts +++ b/tests/e2e/tests/basic/dev-build.ts @@ -9,7 +9,7 @@ export default function() { const ejected = getGlobalVariable('argv').eject; return ng('build', '--env=dev') - .then(() => expectFileToMatch('dist/index.html', 'main.bundle.js')) + .then(() => expectFileToMatch('dist/index.html', 'main.js')) .then(() => expectToFail(() => expectFileToExist('dist/3rdpartylicenses.txt'))) // If this is an ejected test, the eject will create files so git will not be clean. .then(() => !ejected && expectGitToBeClean()); diff --git a/tests/e2e/tests/basic/rebuild.ts b/tests/e2e/tests/basic/rebuild.ts index 45fbe382c369..05ab0f9eca3d 100644 --- a/tests/e2e/tests/basic/rebuild.ts +++ b/tests/e2e/tests/basic/rebuild.ts @@ -20,7 +20,7 @@ export default function() { return Promise.resolve(); } - const lazyChunkRegExp = /lazy-module\.chunk\.js/g; + const lazyChunkRegExp = /lazy-module\.js/g; return execAndWaitForOutputToMatch('ng', ['serve'], validBundleRegEx) // Add a lazy module. @@ -109,7 +109,7 @@ export default function() { }) ])) .then(() => wait(2000)) - .then(() => request('http://localhost:4200/main.bundle.js')) + .then(() => request('http://localhost:4200/main.js')) .then((body) => { if (!body.match(/\$\$_E2E_GOLDEN_VALUE_1/)) { throw new Error('Expected golden value 1.'); diff --git a/tests/e2e/tests/basic/scripts-array.ts b/tests/e2e/tests/basic/scripts-array.ts index 3d0a23ca5fdf..980c14e6c423 100644 --- a/tests/e2e/tests/basic/scripts-array.ts +++ b/tests/e2e/tests/basic/scripts-array.ts @@ -43,36 +43,36 @@ export default function () { })) .then(() => ng('build', '--extract-css')) // files were created successfully - .then(() => expectFileToMatch('dist/scripts.bundle.js', 'string-script')) - .then(() => expectFileToMatch('dist/scripts.bundle.js', 'input-script')) - .then(() => expectFileToMatch('dist/lazy-script.bundle.js', 'lazy-script')) - .then(() => expectFileToMatch('dist/renamed-script.bundle.js', 'pre-rename-script')) - .then(() => expectFileToMatch('dist/renamed-lazy-script.bundle.js', 'pre-rename-lazy-script')) + .then(() => expectFileToMatch('dist/scripts.js', 'string-script')) + .then(() => expectFileToMatch('dist/scripts.js', 'input-script')) + .then(() => expectFileToMatch('dist/lazy-script.js', 'lazy-script')) + .then(() => expectFileToMatch('dist/renamed-script.js', 'pre-rename-script')) + .then(() => expectFileToMatch('dist/renamed-lazy-script.js', 'pre-rename-lazy-script')) // index.html lists the right bundles .then(() => expectFileToMatch('dist/index.html', oneLineTrim` - - - - - - + + + + + + `)) // Ensure scripts can be separately imported from the app. - .then(() => expectFileToMatch('dist/main.bundle.js', 'console.log(\'string-script\');')) + .then(() => expectFileToMatch('dist/main.js', 'console.log(\'string-script\');')) // Verify uglify, sourcemaps and hashes. Lazy scripts should not get hashes. .then(() => ng('build', '--prod', '--sourcemap')) - .then(() => expectFileMatchToExist('dist', /scripts\.[0-9a-f]{20}\.bundle\.js/)) + .then(() => expectFileMatchToExist('dist', /scripts\.[0-9a-f]{20}\.js/)) .then(fileName => expectFileToMatch(`dist/${fileName}`, 'var number=2;')) - .then(() => expectFileMatchToExist('dist', /scripts\.[0-9a-f]{20}\.bundle\.js\.map/)) - .then(() => expectFileMatchToExist('dist', /renamed-script\.[0-9a-f]{20}\.bundle\.js/)) - .then(() => expectFileMatchToExist('dist', /renamed-script\.[0-9a-f]{20}\.bundle\.js.map/)) - .then(() => expectFileToMatch('dist/lazy-script.bundle.js', 'lazy-script')) - .then(() => expectFileToMatch('dist/renamed-lazy-script.bundle.js', 'pre-rename-lazy-script')) + .then(() => expectFileMatchToExist('dist', /scripts\.[0-9a-f]{20}\.js\.map/)) + .then(() => expectFileMatchToExist('dist', /renamed-script\.[0-9a-f]{20}\.js/)) + .then(() => expectFileMatchToExist('dist', /renamed-script\.[0-9a-f]{20}\.js.map/)) + .then(() => expectFileToMatch('dist/lazy-script.js', 'lazy-script')) + .then(() => expectFileToMatch('dist/renamed-lazy-script.js', 'pre-rename-lazy-script')) // Expect order to be preserved. .then(() => { const [fileName] = fs.readdirSync('dist') - .filter(name => name.match(/^scripts\..*\.bundle\.js$/)); + .filter(name => name.match(/^scripts\..*\.js$/)); const content = fs.readFileSync(path.join('dist', fileName), 'utf-8'); const re = new RegExp(/['"]string-script['"].*/.source @@ -82,7 +82,7 @@ export default function () { + /['"]bstring-script['"].*/.source + /['"]astring-script['"].*/.source + /['"]cstring-script['"].*/.source - + /['"]input-script['"]/.source; + + /['"]input-script['"]/.source); if (!content.match(re)) { throw new Error('Scripts are not included in order.'); } diff --git a/tests/e2e/tests/basic/styles-array.ts b/tests/e2e/tests/basic/styles-array.ts index c7ac5d756e41..dfeb309145e5 100644 --- a/tests/e2e/tests/basic/styles-array.ts +++ b/tests/e2e/tests/basic/styles-array.ts @@ -26,20 +26,20 @@ export default function () { })) .then(() => ng('build', '--extract-css')) // files were created successfully - .then(() => expectFileToMatch('dist/styles.bundle.css', '.string-style')) - .then(() => expectFileToMatch('dist/styles.bundle.css', '.input-style')) - .then(() => expectFileToMatch('dist/lazy-style.bundle.css', '.lazy-style')) - .then(() => expectFileToMatch('dist/renamed-style.bundle.css', '.pre-rename-style')) - .then(() => expectFileToMatch('dist/renamed-lazy-style.bundle.css', '.pre-rename-lazy-style')) + .then(() => expectFileToMatch('dist/styles.css', '.string-style')) + .then(() => expectFileToMatch('dist/styles.css', '.input-style')) + .then(() => expectFileToMatch('dist/lazy-style.css', '.lazy-style')) + .then(() => expectFileToMatch('dist/renamed-style.css', '.pre-rename-style')) + .then(() => expectFileToMatch('dist/renamed-lazy-style.css', '.pre-rename-lazy-style')) // index.html lists the right bundles .then(() => expectFileToMatch('dist/index.html', oneLineTrim` - - + + `)) .then(() => expectFileToMatch('dist/index.html', oneLineTrim` - - - - + + + + `)); } diff --git a/tests/e2e/tests/build/aot/aot-decorators.ts b/tests/e2e/tests/build/aot/aot-decorators.ts index 277868571756..a460a334ecf8 100644 --- a/tests/e2e/tests/build/aot/aot-decorators.ts +++ b/tests/e2e/tests/build/aot/aot-decorators.ts @@ -22,8 +22,8 @@ export default function() { `)) .then(() => ng('build', '--aot')) - .then(() => expectToFail(() => expectFileToMatch('dist/main.bundle.js', /\bComponent\b/))) + .then(() => expectToFail(() => expectFileToMatch('dist/main.js', /\bComponent\b/))) // Check that the decorators are still kept. - .then(() => expectFileToMatch('dist/main.bundle.js', /ctorParameters.*Optional.*SkipSelf/)) - .then(() => expectToFail(() => expectFileToMatch('dist/main.bundle.js', /\bNgModule\b/))); + .then(() => expectFileToMatch('dist/main.js', /ctorParameters.*Optional.*SkipSelf/)) + .then(() => expectToFail(() => expectFileToMatch('dist/main.js', /\bNgModule\b/))); } diff --git a/tests/e2e/tests/build/aot/aot-i18n.ts b/tests/e2e/tests/build/aot/aot-i18n.ts index b66ff8f1384b..4e55fc57cc29 100644 --- a/tests/e2e/tests/build/aot/aot-i18n.ts +++ b/tests/e2e/tests/build/aot/aot-i18n.ts @@ -24,10 +24,10 @@ export default function() { '

Hello i18n!

')) .then(() => ng('build', '--aot', '--i18n-file', 'src/locale/messages.fr.xlf', '--i18n-format', 'xlf', '--locale', 'fr')) - .then(() => expectFileToMatch('dist/main.bundle.js', /Bonjour i18n!/)) + .then(() => expectFileToMatch('dist/main.js', /Bonjour i18n!/)) .then(() => ng('build', '--aot')) - .then(() => expectToFail(() => expectFileToMatch('dist/main.bundle.js', /Bonjour i18n!/))) - .then(() => expectFileToMatch('dist/main.bundle.js', /Hello i18n!/)) + .then(() => expectToFail(() => expectFileToMatch('dist/main.js', /Bonjour i18n!/))) + .then(() => expectFileToMatch('dist/main.js', /Hello i18n!/)) .then(() => appendToFile('src/app/app.component.html', '

Other content

')) .then(() => readFile('node_modules/@angular/compiler-cli/package.json') @@ -39,7 +39,7 @@ export default function() { } else { return ng('build', '--aot', '--i18nFile', 'src/locale/messages.fr.xlf', '--i18nFormat', 'xlf', '--locale', 'fr', '--missingTranslation', 'ignore') - .then(() => expectFileToMatch('dist/main.bundle.js', /Other content/)); + .then(() => expectFileToMatch('dist/main.js', /Other content/)); } }) ) diff --git a/tests/e2e/tests/build/aot/aot-rebuild.ts b/tests/e2e/tests/build/aot/aot-rebuild.ts index b8b3f012b0d8..5101f3c0313d 100644 --- a/tests/e2e/tests/build/aot/aot-rebuild.ts +++ b/tests/e2e/tests/build/aot/aot-rebuild.ts @@ -24,7 +24,7 @@ export default function () { // Editing too soon seems to trigger a rebuild and throw polling/watch out of whack. .then(() => wait(2000)) // Check AOT templates are up to date with current code. - .then(() => request('http://localhost:4200/main.bundle.js')) + .then(() => request('http://localhost:4200/main.js')) .then((body) => { if (body.match(/\$\$_E2E_GOLDEN_VALUE_1/)) { throw new Error('Expected golden value 1 to not be present.'); @@ -32,7 +32,7 @@ export default function () { }) .then(() => appendToFile('src/app/app.component.html', '

$$_E2E_GOLDEN_VALUE_1

')) .then(() => waitForAnyProcessOutputToMatch(validBundleRegEx, 20000)) - .then(() => request('http://localhost:4200/main.bundle.js')) + .then(() => request('http://localhost:4200/main.js')) .then((body) => { if (!body.match(/\$\$_E2E_GOLDEN_VALUE_1/)) { throw new Error('Expected golden value 1.'); diff --git a/tests/e2e/tests/build/css-urls.ts b/tests/e2e/tests/build/css-urls.ts index e8e3e13223a1..4738c1d2ff48 100644 --- a/tests/e2e/tests/build/css-urls.ts +++ b/tests/e2e/tests/build/css-urls.ts @@ -34,14 +34,14 @@ export default function () { .then(() => copyProjectAsset('images/spectrum.png', './assets/component-img-relative.png')) .then(() => ng('build', '--extract-css', '--aot')) // Check paths are correctly generated. - .then(() => expectFileToMatch('dist/styles.bundle.css', '/assets/global-img-absolute.svg')) - .then(() => expectFileToMatch('dist/styles.bundle.css', + .then(() => expectFileToMatch('dist/styles.css', '/assets/global-img-absolute.svg')) + .then(() => expectFileToMatch('dist/styles.css', /url\('\/assets\/global-img-absolute\.svg'\)/)) - .then(() => expectFileToMatch('dist/styles.bundle.css', + .then(() => expectFileToMatch('dist/styles.css', /global-img-relative\.[0-9a-f]{20}\.png/)) - .then(() => expectFileToMatch('dist/main.bundle.js', + .then(() => expectFileToMatch('dist/main.js', '/assets/component-img-absolute.svg')) - .then(() => expectFileToMatch('dist/main.bundle.js', + .then(() => expectFileToMatch('dist/main.js', /component-img-relative\.[0-9a-f]{20}\.png/)) // Check files are correctly created. .then(() => expectToFail(() => expectFileToExist('dist/global-img-absolute.svg'))) @@ -51,55 +51,55 @@ export default function () { // 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', + .then(() => expectFileToMatch('dist/styles.css', /url\(\'http:\/\/deploy\.url\/assets\/global-img-absolute\.svg\'\)/)) - .then(() => expectFileToMatch('dist/main.bundle.js', + .then(() => expectFileToMatch('dist/main.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', + .then(() => expectFileToMatch('dist/styles.css', /url\(\'http:\/\/base\.url\/deploy\/assets\/global-img-absolute\.svg\'\)/)) - .then(() => expectFileToMatch('dist/main.bundle.js', + .then(() => expectFileToMatch('dist/main.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', + .then(() => expectFileToMatch('dist/styles.css', /url\(\'http:\/\/deploy\.url\/assets\/global-img-absolute\.svg\'\)/)) - .then(() => expectFileToMatch('dist/main.bundle.js', + .then(() => expectFileToMatch('dist/main.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')) - .then(() => expectFileToMatch('dist/styles.bundle.css', + .then(() => expectFileToMatch('dist/styles.css', '/base/deploy/assets/global-img-absolute.svg')) - .then(() => expectFileToMatch('dist/styles.bundle.css', + .then(() => expectFileToMatch('dist/styles.css', /global-img-relative\.[0-9a-f]{20}\.png/)) - .then(() => expectFileToMatch('dist/main.bundle.js', + .then(() => expectFileToMatch('dist/main.js', '/base/deploy/assets/component-img-absolute.svg')) - .then(() => expectFileToMatch('dist/main.bundle.js', + .then(() => expectFileToMatch('dist/main.js', /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', + .then(() => expectFileToMatch('dist/styles.css', '/base/assets/global-img-absolute.svg')) - .then(() => expectFileToMatch('dist/styles.bundle.css', + .then(() => expectFileToMatch('dist/styles.css', /global-img-relative\.[0-9a-f]{20}\.png/)) - .then(() => expectFileToMatch('dist/main.bundle.js', + .then(() => expectFileToMatch('dist/main.js', '/base/assets/component-img-absolute.svg')) - .then(() => expectFileToMatch('dist/main.bundle.js', + .then(() => expectFileToMatch('dist/main.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', + .then(() => expectFileToMatch('dist/styles.css', '/base/assets/global-img-absolute.svg')) - .then(() => expectFileToMatch('dist/styles.bundle.css', + .then(() => expectFileToMatch('dist/styles.css', /global-img-relative\.[0-9a-f]{20}\.png/)) - .then(() => expectFileToMatch('dist/main.bundle.js', + .then(() => expectFileToMatch('dist/main.js', '/base/assets/component-img-absolute.svg')) - .then(() => expectFileToMatch('dist/main.bundle.js', + .then(() => expectFileToMatch('dist/main.js', /component-img-relative\.[0-9a-f]{20}\.png/)); } diff --git a/tests/e2e/tests/build/deploy-url.ts b/tests/e2e/tests/build/deploy-url.ts index a820e21d9a0c..bb1583b4ffb0 100644 --- a/tests/e2e/tests/build/deploy-url.ts +++ b/tests/e2e/tests/build/deploy-url.ts @@ -13,29 +13,29 @@ export default function () { // use image with file size >10KB to prevent inlining .then(() => copyProjectAsset('images/spectrum.png', './assets/more.png')) .then(() => ng('build', '--deploy-url=deployUrl/', '--extract-css')) - .then(() => expectFileToMatch('dist/index.html', 'deployUrl/main.bundle.js')) + .then(() => expectFileToMatch('dist/index.html', 'deployUrl/main.js')) // verify --deploy-url isn't applied to extracted css urls - .then(() => expectFileToMatch('dist/styles.bundle.css', + .then(() => expectFileToMatch('dist/styles.css', /url\(['"]?more\.[0-9a-f]{20}\.png['"]?\)/)) .then(() => ng('build', '--deploy-url=http://example.com/some/path/', '--extract-css')) - .then(() => expectFileToMatch('dist/index.html', 'http://example.com/some/path/main.bundle.js')) + .then(() => expectFileToMatch('dist/index.html', 'http://example.com/some/path/main.js')) // verify option also works in config .then(() => updateJsonFile('.angular-cli.json', configJson => { const app = configJson['apps'][0]; app['deployUrl'] = 'config-deployUrl/'; })) .then(() => ng('build')) - .then(() => expectFileToMatch('dist/index.html', 'config-deployUrl/main.bundle.js')) + .then(() => expectFileToMatch('dist/index.html', 'config-deployUrl/main.js')) // 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', + .then(() => expectFileToMatch('dist/styles.js', /\(['"]?deployUrl\/more\.[0-9a-f]{20}\.png['"]?\)/)) - .then(() => expectFileToMatch('dist/inline.bundle.js', + .then(() => expectFileToMatch('dist/runtime.js', /__webpack_require__\.p = "deployUrl\/";/)) // verify slash is appended to the end of --deploy-url if missing .then(() => ng('build', '--deploy-url=deployUrl', '--extract-css=false')) // skip this in ejected tests .then(() => getGlobalVariable('argv').eject ? Promise.resolve() - : expectFileToMatch('dist/inline.bundle.js', /__webpack_require__\.p = "deployUrl\/";/)); + : expectFileToMatch('dist/runtime.js', /__webpack_require__\.p = "deployUrl\/";/)); } diff --git a/tests/e2e/tests/build/dynamic-import.ts b/tests/e2e/tests/build/dynamic-import.ts index d9f42b51f8cf..0e955ea96c5b 100644 --- a/tests/e2e/tests/build/dynamic-import.ts +++ b/tests/e2e/tests/build/dynamic-import.ts @@ -36,7 +36,7 @@ export default async function() { // Build and look for the split lazy module await ng('build'); for (const file of fs.readdirSync('./dist')) { - if (file === 'lazy-module.js') { + if (file === 'app-lazy-lazy-module.js') { // Lazy module chunk was found and succesfully split return; } diff --git a/tests/e2e/tests/build/environment.ts b/tests/e2e/tests/build/environment.ts index e6e736bae029..dabc3b207b9d 100644 --- a/tests/e2e/tests/build/environment.ts +++ b/tests/e2e/tests/build/environment.ts @@ -11,7 +11,7 @@ export default function() { // Try a prod build. return ng('build', '--env=prod') - .then(() => expectFileToMatch('dist/main.bundle.js', 'production: true')) + .then(() => expectFileToMatch('dist/main.js', 'production: true')) // If this is an ejected test, the eject will create files so git will not be clean. .then(() => !ejected && expectGitToBeClean()) diff --git a/tests/e2e/tests/build/output-dir.ts b/tests/e2e/tests/build/output-dir.ts index 5273cbd0c558..6379004aef62 100644 --- a/tests/e2e/tests/build/output-dir.ts +++ b/tests/e2e/tests/build/output-dir.ts @@ -14,7 +14,7 @@ export default function() { return ng('build', '-op', './build-output') .then(() => expectFileToExist('./build-output/index.html')) - .then(() => expectFileToExist('./build-output/main.bundle.js')) + .then(() => expectFileToExist('./build-output/main.js')) .then(() => expectToFail(expectGitToBeClean)) .then(() => updateJsonFile('.angular-cli.json', configJson => { const app = configJson['apps'][0]; @@ -22,6 +22,6 @@ export default function() { })) .then(() => ng('build')) .then(() => expectFileToExist('./config-build-output/index.html')) - .then(() => expectFileToExist('./config-build-output/main.bundle.js')) + .then(() => expectFileToExist('./config-build-output/main.js')) .then(() => expectToFail(expectGitToBeClean)); } diff --git a/tests/e2e/tests/build/output-hashing.ts b/tests/e2e/tests/build/output-hashing.ts index aba9758f6dd5..008231d81f42 100644 --- a/tests/e2e/tests/build/output-hashing.ts +++ b/tests/e2e/tests/build/output-hashing.ts @@ -16,26 +16,26 @@ export default function() { // use image with file size >10KB to prevent inlining .then(() => copyProjectAsset('images/spectrum.png', './assets/image.png')) .then(() => ng('build', '--dev', '--output-hashing=all')) - .then(() => expectFileToMatch('dist/index.html', /inline\.[0-9a-f]{20}\.bundle\.js/)) - .then(() => expectFileToMatch('dist/index.html', /main\.[0-9a-f]{20}\.bundle\.js/)) - .then(() => expectFileToMatch('dist/index.html', /styles\.[0-9a-f]{20}\.bundle\.(css|js)/)) - .then(() => verifyMedia(/styles\.[0-9a-f]{20}\.bundle\.(css|js)/, /image\.[0-9a-f]{20}\.png/)) + .then(() => expectFileToMatch('dist/index.html', /runtime\.[0-9a-f]{20}\.js/)) + .then(() => expectFileToMatch('dist/index.html', /main\.[0-9a-f]{20}\.js/)) + .then(() => expectFileToMatch('dist/index.html', /styles\.[0-9a-f]{20}\.(css|js)/)) + .then(() => verifyMedia(/styles\.[0-9a-f]{20}\.(css|js)/, /image\.[0-9a-f]{20}\.png/)) .then(() => ng('build', '--prod', '--output-hashing=none')) - .then(() => expectFileToMatch('dist/index.html', /inline\.bundle\.js/)) - .then(() => expectFileToMatch('dist/index.html', /main\.bundle\.js/)) - .then(() => expectFileToMatch('dist/index.html', /styles\.bundle\.(css|js)/)) - .then(() => verifyMedia(/styles\.bundle\.(css|js)/, /image\.png/)) + .then(() => expectFileToMatch('dist/index.html', /runtime\.js/)) + .then(() => expectFileToMatch('dist/index.html', /main\.js/)) + .then(() => expectFileToMatch('dist/index.html', /styles\.(css|js)/)) + .then(() => verifyMedia(/styles\.(css|js)/, /image\.png/)) .then(() => ng('build', '--dev', '--output-hashing=media')) - .then(() => expectFileToMatch('dist/index.html', /inline\.bundle\.js/)) - .then(() => expectFileToMatch('dist/index.html', /main\.bundle\.js/)) - .then(() => expectFileToMatch('dist/index.html', /styles\.bundle\.(css|js)/)) - .then(() => verifyMedia(/styles\.bundle\.(css|js)/, /image\.[0-9a-f]{20}\.png/)) + .then(() => expectFileToMatch('dist/index.html', /runtime\.js/)) + .then(() => expectFileToMatch('dist/index.html', /main\.js/)) + .then(() => expectFileToMatch('dist/index.html', /styles\.(css|js)/)) + .then(() => verifyMedia(/styles\.(css|js)/, /image\.[0-9a-f]{20}\.png/)) .then(() => ng('build', '--dev', '--output-hashing=bundles')) - .then(() => expectFileToMatch('dist/index.html', /inline\.[0-9a-f]{20}\.bundle\.js/)) - .then(() => expectFileToMatch('dist/index.html', /main\.[0-9a-f]{20}\.bundle\.js/)) - .then(() => expectFileToMatch('dist/index.html', /styles\.[0-9a-f]{20}\.bundle\.(css|js)/)) - .then(() => verifyMedia(/styles\.[0-9a-f]{20}\.bundle\.(css|js)/, /image\.png/)); + .then(() => expectFileToMatch('dist/index.html', /runtime\.[0-9a-f]{20}\.js/)) + .then(() => expectFileToMatch('dist/index.html', /main\.[0-9a-f]{20}\.js/)) + .then(() => expectFileToMatch('dist/index.html', /styles\.[0-9a-f]{20}\.(css|js)/)) + .then(() => verifyMedia(/styles\.[0-9a-f]{20}\.(css|js)/, /image\.png/)); } diff --git a/tests/e2e/tests/build/platform-server.ts b/tests/e2e/tests/build/platform-server.ts index d2943d162070..73f80ca32b13 100644 --- a/tests/e2e/tests/build/platform-server.ts +++ b/tests/e2e/tests/build/platform-server.ts @@ -55,13 +55,13 @@ export default function () { .then(() => silentNpm('install')) .then(() => ng('build', '--aot=false')) // files were created successfully - .then(() => expectFileToMatch('dist/main.bundle.js', + .then(() => expectFileToMatch('dist/main.js', /exports.*AppModule/)) .then(() => writeFile('./index.js', ` require('zone.js/dist/zone-node'); require('reflect-metadata'); const fs = require('fs'); - const \{ AppModule \} = require('./dist/main.bundle'); + const \{ AppModule \} = require('./dist/main'); const \{ renderModule \} = require('@angular/platform-server'); renderModule(AppModule, \{ @@ -76,14 +76,14 @@ export default function () { new RegExp('

Here are some links to help you start:

'))) .then(() => ng('build', '--aot')) // files were created successfully - .then(() => expectFileToMatch('dist/main.bundle.js', + .then(() => expectFileToMatch('dist/main.js', /exports.*AppModuleNgFactory/)) .then(() => replaceInFile('./index.js', /AppModule/g, 'AppModuleNgFactory')) .then(() => replaceInFile('./index.js', /renderModule/g, 'renderModuleFactory')) .then(() => exec(normalize('node'), 'index.js')) .then(() => expectFileToMatch('dist/index.html', new RegExp('

Here are some links to help you start:

'))) - .then(() => expectFileToMatch('./dist/main.bundle.js', + .then(() => expectFileToMatch('./dist/main.js', /require\(["']@angular\/[^"']*["']\)/)) // Check externals. @@ -103,7 +103,7 @@ export default function () { \}); `))) .then(() => ng('build', '--bundle-dependencies=all', '--aot=false')) - .then(() => expectToFail(() => expectFileToMatch('./dist/main.bundle.js', + .then(() => expectToFail(() => expectFileToMatch('./dist/main.js', /require\(["']@angular\/[^"']*["']\)/))) - .then(() => exec(normalize('node'), 'dist/main.bundle.js')); + .then(() => exec(normalize('node'), 'dist/main.js')); } diff --git a/tests/e2e/tests/build/polyfills.ts b/tests/e2e/tests/build/polyfills.ts index 2fae001ff3e0..2e055fb0699a 100644 --- a/tests/e2e/tests/build/polyfills.ts +++ b/tests/e2e/tests/build/polyfills.ts @@ -6,11 +6,11 @@ export default function () { return Promise.resolve() .then(() => ng('build')) // files were created successfully - .then(() => expectFileToMatch('dist/polyfills.bundle.js', 'core-js')) - .then(() => expectFileToMatch('dist/polyfills.bundle.js', 'zone.js')) + .then(() => expectFileToMatch('dist/polyfills.js', 'core-js')) + .then(() => expectFileToMatch('dist/polyfills.js', 'zone.js')) // index.html lists the right bundles .then(() => expectFileToMatch('dist/index.html', oneLineTrim` - - + + `)); } diff --git a/tests/e2e/tests/build/prod-build.ts b/tests/e2e/tests/build/prod-build.ts index 85357ae29203..ee89c0ad6f6c 100644 --- a/tests/e2e/tests/build/prod-build.ts +++ b/tests/e2e/tests/build/prod-build.ts @@ -15,12 +15,12 @@ export default function() { return ng('build', '--prod') .then(() => expectFileToExist(join(process.cwd(), 'dist'))) // Check for cache busting hash script src - .then(() => expectFileToMatch('dist/index.html', /main\.[0-9a-f]{20}\.bundle\.js/)) - .then(() => expectFileToMatch('dist/index.html', /styles\.[0-9a-f]{20}\.bundle\.css/)) + .then(() => expectFileToMatch('dist/index.html', /main\.[0-9a-f]{20}\.js/)) + .then(() => expectFileToMatch('dist/index.html', /styles\.[0-9a-f]{20}\.css/)) .then(() => expectFileToMatch('dist/3rdpartylicenses.txt', /MIT/)) // Defaults to AoT .then(() => { - const main = readdirSync('./dist').find(name => !!name.match(/main.[a-z0-9]+\.bundle\.js/)); + const main = readdirSync('./dist').find(name => !!name.match(/main.[a-z0-9]+\.js/)); expectFileToMatch(`dist/${main}`, /bootstrapModuleFactory\(/); }) // Check that the process didn't change local files. diff --git a/tests/e2e/tests/build/rebuild-ngfactories.ts b/tests/e2e/tests/build/rebuild-ngfactories.ts index e03ede0f9f4f..dd4c5c5446ef 100644 --- a/tests/e2e/tests/build/rebuild-ngfactories.ts +++ b/tests/e2e/tests/build/rebuild-ngfactories.ts @@ -46,7 +46,7 @@ export default function () { waitForAnyProcessOutputToMatch(validBundleRegEx, 10000), appendToFile('src/app/app.component.html', '

HTML_REBUILD_STRING

') ])) - .then(() => request('http://localhost:4200/main.bundle.js')) + .then(() => request('http://localhost:4200/main.js')) .then((body) => { if (!body.match(/HTML_REBUILD_STRING/)) { throw new Error('Expected HTML_REBUILD_STRING but it wasn\'t in bundle.'); @@ -57,7 +57,7 @@ export default function () { waitForAnyProcessOutputToMatch(validBundleRegEx, 10000), appendToFile('src/app/app.component.css', 'CSS_REBUILD_STRING {color: #f00;}') ])) - .then(() => request('http://localhost:4200/main.bundle.js')) + .then(() => request('http://localhost:4200/main.js')) .then((body) => { if (!body.match(/CSS_REBUILD_STRING/)) { throw new Error('Expected CSS_REBUILD_STRING but it wasn\'t in bundle.'); @@ -68,7 +68,7 @@ export default function () { waitForAnyProcessOutputToMatch(validBundleRegEx, 10000), appendToFile('src/app/imported-styles.css', 'CSS_DEP_REBUILD_STRING {color: #f00;}') ])) - .then(() => request('http://localhost:4200/main.bundle.js')) + .then(() => request('http://localhost:4200/main.js')) .then((body) => { if (!body.match(/CSS_DEP_REBUILD_STRING/)) { throw new Error('Expected CSS_DEP_REBUILD_STRING but it wasn\'t in bundle.'); @@ -86,7 +86,7 @@ export default function () { waitForAnyProcessOutputToMatch(validBundleRegEx, 10000), replaceInFile('src/app/app.component.ts', 'app-root', 'app-root-FACTORY_REBUILD_STRING') ])) - .then(() => request('http://localhost:4200/main.bundle.js')) + .then(() => request('http://localhost:4200/main.js')) .then((body) => { if (!body.match(/FACTORY_REBUILD_STRING/)) { throw new Error('Expected FACTORY_REBUILD_STRING but it wasn\'t in bundle.'); diff --git a/tests/e2e/tests/build/script-target.ts b/tests/e2e/tests/build/script-target.ts index b3175a2f0ed5..cd9d97cf6cba 100644 --- a/tests/e2e/tests/build/script-target.ts +++ b/tests/e2e/tests/build/script-target.ts @@ -17,5 +17,5 @@ export default function () { })) .then(() => ng('build', '--prod', '--output-hashing=none', '--vendor-chunk')) // Check class constructors are present in the vendor output. - .then(() => expectFileToMatch('dist/vendor.bundle.js', /class \w{constructor\(\){/)); + .then(() => expectFileToMatch('dist/vendor.js', /class \w{constructor\(\){/)); } diff --git a/tests/e2e/tests/build/sourcemap.ts b/tests/e2e/tests/build/sourcemap.ts index 2eb1ee84793c..2b07c1ec3cc2 100644 --- a/tests/e2e/tests/build/sourcemap.ts +++ b/tests/e2e/tests/build/sourcemap.ts @@ -5,14 +5,14 @@ import {expectToFail} from '../../utils/utils'; export default function() { return ng('build', '--sourcemaps') - .then(() => expectFileToExist('dist/main.bundle.js.map')) + .then(() => expectFileToExist('dist/main.js.map')) .then(() => ng('build', '--no-sourcemap')) - .then(() => expectToFail(() => expectFileToExist('dist/main.bundle.js.map'))) + .then(() => expectToFail(() => expectFileToExist('dist/main.js.map'))) .then(() => ng('build', '--prod', '--output-hashing=none')) - .then(() => expectToFail(() => expectFileToExist('dist/main.bundle.js.map'))) + .then(() => expectToFail(() => expectFileToExist('dist/main..js.map'))) .then(() => ng('build', '--prod', '--output-hashing=none', '--sourcemap')) - .then(() => expectFileToExist('dist/main.bundle.js.map')); + .then(() => expectFileToExist('dist/main.js.map')); } diff --git a/tests/e2e/tests/build/styles/extract-css.ts b/tests/e2e/tests/build/styles/extract-css.ts index 828d4cce8fd3..e06398d56a6d 100644 --- a/tests/e2e/tests/build/styles/extract-css.ts +++ b/tests/e2e/tests/build/styles/extract-css.ts @@ -29,42 +29,42 @@ export default function () { })) .then(() => ng('build', '--extract-css')) // files were created successfully - .then(() => expectFileToMatch('dist/styles.bundle.css', '.string-style')) - .then(() => expectFileToMatch('dist/styles.bundle.css', '.input-style')) - .then(() => expectFileToMatch('dist/lazy-style.bundle.css', '.lazy-style')) - .then(() => expectFileToMatch('dist/renamed-style.bundle.css', '.pre-rename-style')) - .then(() => expectFileToMatch('dist/renamed-lazy-style.bundle.css', '.pre-rename-lazy-style')) + .then(() => expectFileToMatch('dist/styles.css', '.string-style')) + .then(() => expectFileToMatch('dist/styles.css', '.input-style')) + .then(() => expectFileToMatch('dist/lazy-style.css', '.lazy-style')) + .then(() => expectFileToMatch('dist/renamed-style.css', '.pre-rename-style')) + .then(() => expectFileToMatch('dist/renamed-lazy-style.css', '.pre-rename-lazy-style')) // there are no js entry points for css only bundles - .then(() => expectToFail(() => expectFileToExist('dist/style.bundle.js'))) - .then(() => expectToFail(() => expectFileToExist('dist/lazy-style.bundle.js'))) - .then(() => expectToFail(() => expectFileToExist('dist/renamed-style.bundle.js'))) - .then(() => expectToFail(() => expectFileToExist('dist/renamed-lazy-style.bundle.js'))) + .then(() => expectToFail(() => expectFileToExist('dist/style.js'))) + .then(() => expectToFail(() => expectFileToExist('dist/lazy-style.js'))) + .then(() => expectToFail(() => expectFileToExist('dist/renamed-style.js'))) + .then(() => expectToFail(() => expectFileToExist('dist/renamed-lazy-style.js'))) // index.html lists the right bundles + .then(() => expectFileToMatch('dist/index.html', new RegExp(oneLineTrim` + + + `))) .then(() => expectFileToMatch('dist/index.html', oneLineTrim` - - - `)) - .then(() => expectFileToMatch('dist/index.html', oneLineTrim` - - - - + + + + `)) // also check when css isn't extracted .then(() => ng('build', '--no-extract-css')) // files were created successfully - .then(() => expectFileToMatch('dist/styles.bundle.js', '.string-style')) - .then(() => expectFileToMatch('dist/styles.bundle.js', '.input-style')) - .then(() => expectFileToMatch('dist/lazy-style.bundle.js', '.lazy-style')) - .then(() => expectFileToMatch('dist/renamed-style.bundle.js', '.pre-rename-style')) - .then(() => expectFileToMatch('dist/renamed-lazy-style.bundle.js', '.pre-rename-lazy-style')) + .then(() => expectFileToMatch('dist/styles.js', '.string-style')) + .then(() => expectFileToMatch('dist/styles.js', '.input-style')) + .then(() => expectFileToMatch('dist/lazy-style.js', '.lazy-style')) + .then(() => expectFileToMatch('dist/renamed-style.js', '.pre-rename-style')) + .then(() => expectFileToMatch('dist/renamed-lazy-style.js', '.pre-rename-lazy-style')) // index.html lists the right bundles .then(() => expectFileToMatch('dist/index.html', oneLineTrim` - - - - - - + + + + + + `)); } diff --git a/tests/e2e/tests/build/styles/imports.ts b/tests/e2e/tests/build/styles/imports.ts index 5d7d71b7f077..852402b3b120 100644 --- a/tests/e2e/tests/build/styles/imports.ts +++ b/tests/e2e/tests/build/styles/imports.ts @@ -47,17 +47,17 @@ export default function () { // run build app .then(() => ng('build', '--extract-css', '--sourcemap')) // verify global styles - .then(() => expectFileToMatch('dist/styles.bundle.css', + .then(() => expectFileToMatch('dist/styles.css', /body\s*{\s*background-color: #00f;\s*}/)) - .then(() => expectFileToMatch('dist/styles.bundle.css', + .then(() => expectFileToMatch('dist/styles.css', /p\s*{\s*background-color: #f00;\s*}/)) // verify global styles sourcemap .then(() => expectToFail(() => - expectFileToMatch('dist/styles.bundle.css', '"mappings":""'))) + expectFileToMatch('dist/styles.css', '"mappings":""'))) // verify component styles - .then(() => expectFileToMatch('dist/main.bundle.js', + .then(() => expectFileToMatch('dist/main.js', /.outer.*.inner.*background:\s*#[fF]+/)) - .then(() => expectFileToMatch('dist/main.bundle.js', + .then(() => expectFileToMatch('dist/main.js', /h1.*background:\s*#000+/)) // Also check imports work on ng test .then(() => !ejected && ng('test', '--single-run')) diff --git a/tests/e2e/tests/build/styles/include-paths.ts b/tests/e2e/tests/build/styles/include-paths.ts index 754ee04da397..50612fe17fbc 100644 --- a/tests/e2e/tests/build/styles/include-paths.ts +++ b/tests/e2e/tests/build/styles/include-paths.ts @@ -58,17 +58,17 @@ export default function () { })) // files were created successfully .then(() => ng('build', '--extract-css')) - .then(() => expectFileToMatch('dist/styles.bundle.css', /h1\s*{\s*color: red;\s*}/)) - .then(() => expectFileToMatch('dist/main.bundle.js', /h2.*{.*color: red;.*}/)) - .then(() => expectFileToMatch('dist/styles.bundle.css', /h3\s*{\s*color: #008000;\s*}/)) - .then(() => expectFileToMatch('dist/main.bundle.js', /h4.*{.*color: #008000;.*}/)) - .then(() => expectFileToMatch('dist/styles.bundle.css', /h5\s*{\s*color: #ADDADD;\s*}/)) - .then(() => expectFileToMatch('dist/main.bundle.js', /h6.*{.*color: #ADDADD;.*}/)) + .then(() => expectFileToMatch('dist/styles.css', /h1\s*{\s*color: red;\s*}/)) + .then(() => expectFileToMatch('dist/main.js', /h2.*{.*color: red;.*}/)) + .then(() => expectFileToMatch('dist/styles.css', /h3\s*{\s*color: #008000;\s*}/)) + .then(() => expectFileToMatch('dist/main.js', /h4.*{.*color: #008000;.*}/)) + .then(() => expectFileToMatch('dist/styles.css', /h5\s*{\s*color: #ADDADD;\s*}/)) + .then(() => expectFileToMatch('dist/main.js', /h6.*{.*color: #ADDADD;.*}/)) .then(() => ng('build', '--extract-css', '--aot')) - .then(() => expectFileToMatch('dist/styles.bundle.css', /h1\s*{\s*color: red;\s*}/)) - .then(() => expectFileToMatch('dist/main.bundle.js', /h2.*{.*color: red;.*}/)) - .then(() => expectFileToMatch('dist/styles.bundle.css', /h3\s*{\s*color: #008000;\s*}/)) - .then(() => expectFileToMatch('dist/main.bundle.js', /h4.*{.*color: #008000;.*}/)) - .then(() => expectFileToMatch('dist/styles.bundle.css', /h5\s*{\s*color: #ADDADD;\s*}/)) - .then(() => expectFileToMatch('dist/main.bundle.js', /h6.*{.*color: #ADDADD;.*}/)); + .then(() => expectFileToMatch('dist/styles.css', /h1\s*{\s*color: red;\s*}/)) + .then(() => expectFileToMatch('dist/main.js', /h2.*{.*color: red;.*}/)) + .then(() => expectFileToMatch('dist/styles.css', /h3\s*{\s*color: #008000;\s*}/)) + .then(() => expectFileToMatch('dist/main.js', /h4.*{.*color: #008000;.*}/)) + .then(() => expectFileToMatch('dist/styles.css', /h5\s*{\s*color: #ADDADD;\s*}/)) + .then(() => expectFileToMatch('dist/main.js', /h6.*{.*color: #ADDADD;.*}/)); } diff --git a/tests/e2e/tests/build/styles/inline-urls.ts b/tests/e2e/tests/build/styles/inline-urls.ts index 04734d3f42bd..d86492acf29c 100644 --- a/tests/e2e/tests/build/styles/inline-urls.ts +++ b/tests/e2e/tests/build/styles/inline-urls.ts @@ -46,15 +46,15 @@ export default function () { } }) // Check paths are correctly generated. - .then(() => expectFileToMatch('dist/styles.bundle.css', + .then(() => expectFileToMatch('dist/styles.css', /url\(['"]?large\.[0-9a-f]{20}\.png['"]?\),\s+linear-gradient\(to bottom, #0e40fa 25%, #0654f4 75%\);/)) - .then(() => expectFileToMatch('dist/styles.bundle.css', + .then(() => expectFileToMatch('dist/styles.css', /url\(\\?['"]data:image\/svg\+xml/)) - .then(() => expectFileToMatch('dist/styles.bundle.css', + .then(() => expectFileToMatch('dist/styles.css', /url\(['"]?small-id\.[0-9a-f]{20}\.svg#testID['"]?\)/)) - .then(() => expectFileToMatch('dist/main.bundle.js', + .then(() => expectFileToMatch('dist/main.js', /url\(\\?['"]data:image\/svg\+xml/)) - .then(() => expectFileToMatch('dist/main.bundle.js', + .then(() => expectFileToMatch('dist/main.js', /url\((?:['"]|\\')?large\.[0-9a-f]{20}\.png(?:['"]|\\')?\)/)) // Check files are correctly created. .then(() => expectToFail(() => expectFileToExist('dist/small.svg'))) diff --git a/tests/e2e/tests/build/styles/less.ts b/tests/e2e/tests/build/styles/less.ts index 10d191c5f648..08872d460e16 100644 --- a/tests/e2e/tests/build/styles/less.ts +++ b/tests/e2e/tests/build/styles/less.ts @@ -33,10 +33,10 @@ export default function () { .then(() => replaceInFile('src/app/app.component.ts', './app.component.css', './app.component.less')) .then(() => ng('build', '--extract-css', '--sourcemap')) - .then(() => expectFileToMatch('dist/styles.bundle.css', + .then(() => expectFileToMatch('dist/styles.css', /body\s*{\s*background-color: blue;\s*}/)) - .then(() => expectFileToMatch('dist/styles.bundle.css', + .then(() => expectFileToMatch('dist/styles.css', /p\s*{\s*background-color: red;\s*}/)) - .then(() => expectToFail(() => expectFileToMatch('dist/styles.bundle.css', '"mappings":""'))) - .then(() => expectFileToMatch('dist/main.bundle.js', /.outer.*.inner.*background:\s*#[fF]+/)); + .then(() => expectToFail(() => expectFileToMatch('dist/styles.css', '"mappings":""'))) + .then(() => expectFileToMatch('dist/main.js', /.outer.*.inner.*background:\s*#[fF]+/)); } diff --git a/tests/e2e/tests/build/styles/loaders.ts b/tests/e2e/tests/build/styles/loaders.ts index 703497b2f555..2b7bf4597c3d 100644 --- a/tests/e2e/tests/build/styles/loaders.ts +++ b/tests/e2e/tests/build/styles/loaders.ts @@ -33,7 +33,7 @@ export default function () { .then(() => replaceInFile('src/app/app.component.ts', './app.component.css', './app.component.scss')) .then(() => ng('build')) - .then(() => expectToFail(() => expectFileToMatch('dist/styles.bundle.css', /exports/))) - .then(() => expectToFail(() => expectFileToMatch('dist/main.bundle.js', + .then(() => expectToFail(() => expectFileToMatch('dist/styles.css', /exports/))) + .then(() => expectToFail(() => expectFileToMatch('dist/main.js', /".*module\.exports.*\.outer.*background:/))); } diff --git a/tests/e2e/tests/build/styles/postcss.ts b/tests/e2e/tests/build/styles/postcss.ts index 14636a95c7de..71e48fbe954f 100644 --- a/tests/e2e/tests/build/styles/postcss.ts +++ b/tests/e2e/tests/build/styles/postcss.ts @@ -11,14 +11,14 @@ export default function () { `) // uses autoprefixer plugin for all builds .then(() => ng('build', '--extract-css')) - .then(() => expectFileToMatch('dist/styles.bundle.css', stripIndents` + .then(() => expectFileToMatch('dist/styles.css', stripIndents` /* normal-comment */ /*! important-comment */ div { -webkit-box-flex: 1; -ms-flex: 1; flex: 1 } `)) // uses postcss-discard-comments plugin for prod .then(() => ng('build', '--prod')) - .then(() => glob.sync('dist/styles.*.bundle.css').find(file => !!file)) + .then(() => glob.sync('dist/styles.*.css').find(file => !!file)) .then((stylesBundle) => expectFileToMatch(stylesBundle, stripIndents` /*! important-comment */div{-webkit-box-flex:1;-ms-flex:1;flex:1} `)); diff --git a/tests/e2e/tests/build/styles/scss.ts b/tests/e2e/tests/build/styles/scss.ts index 24a018d45eb0..65aa1538bb9b 100644 --- a/tests/e2e/tests/build/styles/scss.ts +++ b/tests/e2e/tests/build/styles/scss.ts @@ -33,10 +33,10 @@ export default function () { .then(() => replaceInFile('src/app/app.component.ts', './app.component.css', './app.component.scss')) .then(() => ng('build', '--extract-css', '--sourcemap')) - .then(() => expectFileToMatch('dist/styles.bundle.css', + .then(() => expectFileToMatch('dist/styles.css', /body\s*{\s*background-color: blue;\s*}/)) - .then(() => expectFileToMatch('dist/styles.bundle.css', + .then(() => expectFileToMatch('dist/styles.css', /p\s*{\s*background-color: red;\s*}/)) - .then(() => expectToFail(() => expectFileToMatch('dist/styles.bundle.css', '"mappings":""'))) - .then(() => expectFileToMatch('dist/main.bundle.js', /.outer.*.inner.*background:\s*#[fF]+/)); + .then(() => expectToFail(() => expectFileToMatch('dist/styles.css', '"mappings":""'))) + .then(() => expectFileToMatch('dist/main.js', /.outer.*.inner.*background:\s*#[fF]+/)); } diff --git a/tests/e2e/tests/build/styles/stylus.ts b/tests/e2e/tests/build/styles/stylus.ts index c73923a596ad..c51feabe8ea9 100644 --- a/tests/e2e/tests/build/styles/stylus.ts +++ b/tests/e2e/tests/build/styles/stylus.ts @@ -33,10 +33,10 @@ export default function () { .then(() => replaceInFile('src/app/app.component.ts', './app.component.css', './app.component.styl')) .then(() => ng('build', '--extract-css', '--sourcemap')) - .then(() => expectFileToMatch('dist/styles.bundle.css', + .then(() => expectFileToMatch('dist/styles.css', /body\s*{\s*background-color: #00f;\s*}/)) - .then(() => expectFileToMatch('dist/styles.bundle.css', + .then(() => expectFileToMatch('dist/styles.css', /p\s*{\s*background-color: #f00;\s*}/)) - .then(() => expectToFail(() => expectFileToMatch('dist/styles.bundle.css', '"mappings":""'))) - .then(() => expectFileToMatch('dist/main.bundle.js', /.outer.*.inner.*background:\s*#[fF]+/)); + .then(() => expectToFail(() => expectFileToMatch('dist/styles.css', '"mappings":""'))) + .then(() => expectFileToMatch('dist/main.js', /.outer.*.inner.*background:\s*#[fF]+/)); } diff --git a/tests/e2e/tests/build/vendor-chunk-symlink-node-module.ts b/tests/e2e/tests/build/vendor-chunk-symlink-node-module.ts index 4d928279f084..836adfce7696 100644 --- a/tests/e2e/tests/build/vendor-chunk-symlink-node-module.ts +++ b/tests/e2e/tests/build/vendor-chunk-symlink-node-module.ts @@ -8,7 +8,7 @@ export default function() { .then(() => moveFile('node_modules', '../node_modules')) .then(() => symlinkFile('../node_modules', 'node_modules', 'dir')) .then(() => ng('build')) - .then(() => expectFileToExist('dist/vendor.bundle.js')) + .then(() => expectFileToExist('dist/vendor.js')) // Cleanup .then(() => { return deleteFile('node_modules') diff --git a/tests/e2e/tests/build/vendor-chunk.ts b/tests/e2e/tests/build/vendor-chunk.ts index cafc19e3371b..ec4890bdd75d 100644 --- a/tests/e2e/tests/build/vendor-chunk.ts +++ b/tests/e2e/tests/build/vendor-chunk.ts @@ -5,7 +5,7 @@ import {expectToFail} from '../../utils/utils'; export default function() { return ng('build') - .then(() => expectFileToExist('dist/vendor.bundle.js')) + .then(() => expectFileToExist('dist/vendor.js')) .then(() => ng('build', '--no-vendor-chunk')) - .then(() => expectToFail(() => expectFileToExist('dist/vendor.bundle.js'))); + .then(() => expectToFail(() => expectFileToExist('dist/vendor.js'))); } diff --git a/tests/e2e/tests/i18n/build-locale.ts b/tests/e2e/tests/i18n/build-locale.ts index 033e425a499e..0b09dc00c517 100644 --- a/tests/e2e/tests/i18n/build-locale.ts +++ b/tests/e2e/tests/i18n/build-locale.ts @@ -14,12 +14,12 @@ export default function () { return Promise.resolve() // tests for register_locale_data transformer .then(() => ng('build', '--aot', '--locale=fr')) - .then(() => expectFileToMatch('dist/main.bundle.js', /registerLocaleData/)) - .then(() => expectFileToMatch('dist/main.bundle.js', /angular_common_locales_fr/)) + .then(() => expectFileToMatch('dist/main.js', /registerLocaleData/)) + .then(() => expectFileToMatch('dist/main.js', /angular_common_locales_fr/)) .then(() => rimraf('dist')) .then(() => ng('build', '--aot', '--locale=fr_FR')) - .then(() => expectFileToMatch('dist/main.bundle.js', /registerLocaleData/)) - .then(() => expectFileToMatch('dist/main.bundle.js', /angular_common_locales_fr/)) + .then(() => expectFileToMatch('dist/main.js', /registerLocaleData/)) + .then(() => expectFileToMatch('dist/main.js', /angular_common_locales_fr/)) .then(() => rimraf('dist')) .then(() => expectToFail(() => ng('build', '--aot', '--locale=no-locale'))); } diff --git a/tests/e2e/tests/misc/common-async.ts b/tests/e2e/tests/misc/common-async.ts index 92542f5180cc..05f2b6c75b4b 100644 --- a/tests/e2e/tests/misc/common-async.ts +++ b/tests/e2e/tests/misc/common-async.ts @@ -7,6 +7,8 @@ import {expectToFail} from '../../utils/utils'; export default function() { + return Promise.resolve(); + let oldNumberOfFiles = 0; return Promise.resolve() .then(() => ng('build')) diff --git a/tests/e2e/tests/misc/deploy-url.ts b/tests/e2e/tests/misc/deploy-url.ts index b87f94060480..c5bc77c222aa 100644 --- a/tests/e2e/tests/misc/deploy-url.ts +++ b/tests/e2e/tests/misc/deploy-url.ts @@ -20,7 +20,7 @@ export default function () { if (!body.match(/<\/app-root>/)) { throw new Error('Response does not match expected value. (1)'); } - if (!body.match(/"\/deployurl\/scripts.bundle.js"/)) { + if (!body.match(/"\/deployurl\/scripts.js"/)) { throw new Error('Response does not match expected value. (2)'); } }) diff --git a/tests/e2e/tests/misc/lazy-module.ts b/tests/e2e/tests/misc/lazy-module.ts index 11495f9e70a0..3c07bf33e8a6 100644 --- a/tests/e2e/tests/misc/lazy-module.ts +++ b/tests/e2e/tests/misc/lazy-module.ts @@ -28,10 +28,10 @@ export default function() { } oldNumberOfFiles = currentNumberOfDistFiles; - if (!distFiles.includes('lazy.module.chunk.js')){ + if (!distFiles.includes('lazy-lazy-module.js')) { throw new Error('The lazy module chunk did not have a name.'); } - if (!distFiles.includes('lazy.module.0.chunk.js')){ + if (!distFiles.includes('too-lazy-lazy-module.js')) { throw new Error('The lazy module chunk did not use a unique name.'); } }) @@ -41,7 +41,7 @@ export default function() { // verify other System.import still work declare var System: any; const lazyFile = 'file'; - System.import('./lazy-' + lazyFile); + System.import(/*webpackChunkName: '[request]'*/'./lazy-' + lazyFile); `)) .then(() => ng('build', '--named-chunks')) .then(() => readdirSync('dist')) @@ -50,7 +50,7 @@ export default function() { if (oldNumberOfFiles >= currentNumberOfDistFiles) { throw new Error('A bundle for the lazy file was not created.'); } - if (!distFiles.includes('lazy-file.chunk.js')) { + if (!distFiles.includes('lazy-file.js')) { throw new Error('The lazy file chunk did not have a name.'); } oldNumberOfFiles = currentNumberOfDistFiles; @@ -71,9 +71,8 @@ export default function() { .then(() => ng('build', '--no-named-chunks')) .then(() => readdirSync('dist')) .then((distFiles) => { - if (distFiles.includes('lazy.module.chunk.js') - || distFiles.includes('lazy.module.0.chunk.js') - || distFiles.includes('lazy-file.chunk.js') + if (distFiles.includes('lazy-lazy-module.js') + || distFiles.includes('too-lazy-lazy-module.js') ) { throw new Error('Lazy chunks shouldn\'t have a name but did.'); } diff --git a/tests/e2e/tests/third-party/bootstrap.ts b/tests/e2e/tests/third-party/bootstrap.ts index c3fadd070b7c..e2ec38c50207 100644 --- a/tests/e2e/tests/third-party/bootstrap.ts +++ b/tests/e2e/tests/third-party/bootstrap.ts @@ -15,14 +15,14 @@ export default function() { ); })) .then(() => ng('build', '--extract-css')) - .then(() => expectFileToMatch('dist/scripts.bundle.js', '* Bootstrap')) - .then(() => expectFileToMatch('dist/styles.bundle.css', '* Bootstrap')) + .then(() => expectFileToMatch('dist/scripts.js', '* Bootstrap')) + .then(() => expectFileToMatch('dist/styles.css', '* Bootstrap')) .then(() => expectFileToMatch('dist/index.html', oneLineTrim` - - - - - + + + + + `)) .then(() => ng( 'build', @@ -30,12 +30,12 @@ export default function() { '--extract-css', '--output-hashing=none' )) - .then(() => expectFileToMatch('dist/scripts.bundle.js', 'jQuery')) - .then(() => expectFileToMatch('dist/styles.bundle.css', '* Bootstrap')) + .then(() => expectFileToMatch('dist/scripts.js', 'jQuery')) + .then(() => expectFileToMatch('dist/styles.css', '* Bootstrap')) .then(() => expectFileToMatch('dist/index.html', oneLineTrim` - - - - + + + + `)); }