feat(@angular/cli): shorten output filenames

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]
 ```
 
 ---

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: {

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: [

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)

packages/@angular/cli/plugins/karma-context.html

@@ -26,13 +26,13 @@
     // All served files with the latest timestamps
     %MAPPINGS%
   </script>
-  <script type="text/javascript" src="_karma_webpack_/inline.bundle.js" crossorigin="anonymous"></script>
-  <script type="text/javascript" src="_karma_webpack_/polyfills.bundle.js" crossorigin="anonymous"></script>
+  <script type="text/javascript" src="_karma_webpack_/runtime.js" crossorigin="anonymous"></script>
+  <script type="text/javascript" src="_karma_webpack_/polyfills.js" crossorigin="anonymous"></script>
   <!-- Dynamically replaced with <script> tags -->
   %SCRIPTS%
-  <script type="text/javascript" src="_karma_webpack_/scripts.bundle.js" crossorigin="anonymous"></script>
-  <script type="text/javascript" src="_karma_webpack_/vendor.bundle.js" crossorigin="anonymous"></script>
-  <script type="text/javascript" src="_karma_webpack_/main.bundle.js" crossorigin="anonymous"></script>
+  <script type="text/javascript" src="_karma_webpack_/scripts.js" crossorigin="anonymous"></script>
+  <script type="text/javascript" src="_karma_webpack_/vendor.js" crossorigin="anonymous"></script>
+  <script type="text/javascript" src="_karma_webpack_/main.js" crossorigin="anonymous"></script>
   <script type="text/javascript">
       window.__karma__.loaded();
   </script>

packages/@angular/cli/plugins/karma-debug.html

@@ -28,13 +28,13 @@
     // All served files with the latest timestamps
     %MAPPINGS%
   </script>
-  <script type="text/javascript" src="_karma_webpack_/inline.bundle.js" crossorigin="anonymous"></script>
-  <script type="text/javascript" src="_karma_webpack_/polyfills.bundle.js" crossorigin="anonymous"></script>
+  <script type="text/javascript" src="_karma_webpack_/runtime.js" crossorigin="anonymous"></script>
+  <script type="text/javascript" src="_karma_webpack_/polyfills.js" crossorigin="anonymous"></script>
   <!-- Dynamically replaced with <script> tags -->
   %SCRIPTS%
-  <script type="text/javascript" src="_karma_webpack_/scripts.bundle.js" crossorigin="anonymous"></script>
-  <script type="text/javascript" src="_karma_webpack_/vendor.bundle.js" crossorigin="anonymous"></script>
-  <script type="text/javascript" src="_karma_webpack_/main.bundle.js" crossorigin="anonymous"></script>
+  <script type="text/javascript" src="_karma_webpack_/scripts.js" crossorigin="anonymous"></script>
+  <script type="text/javascript" src="_karma_webpack_/vendor.js" crossorigin="anonymous"></script>
+  <script type="text/javascript" src="_karma_webpack_/main.js" crossorigin="anonymous"></script>
   <script type="text/javascript">
       window.__karma__.loaded();
   </script>

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;

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;
 

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;

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/));
 }

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());

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.');

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`
-      <script type="text/javascript" src="inline.bundle.js"></script>
-      <script type="text/javascript" src="polyfills.bundle.js"></script>
-      <script type="text/javascript" src="scripts.bundle.js"></script>
-      <script type="text/javascript" src="renamed-script.bundle.js"></script>
-      <script type="text/javascript" src="vendor.bundle.js"></script>
-      <script type="text/javascript" src="main.bundle.js"></script>
+      <script type="text/javascript" src="runtime.js"></script>
+      <script type="text/javascript" src="polyfills.js"></script>
+      <script type="text/javascript" src="scripts.js"></script>
+      <script type="text/javascript" src="renamed-script.js"></script>
+      <script type="text/javascript" src="vendor.js"></script>
+      <script type="text/javascript" src="main.js"></script>
     `))
     // 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.');
       }

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`
-      <link href="styles.bundle.css" rel="stylesheet"/>
-      <link href="renamed-style.bundle.css" rel="stylesheet"/>
+      <link rel="stylesheet" href="styles.css">
+      <link rel="stylesheet" href="renamed-style.css">
     `))
     .then(() => expectFileToMatch('dist/index.html', oneLineTrim`
-      <script type="text/javascript" src="inline.bundle.js"></script>
-      <script type="text/javascript" src="polyfills.bundle.js"></script>
-      <script type="text/javascript" src="vendor.bundle.js"></script>
-      <script type="text/javascript" src="main.bundle.js"></script>
+      <script type="text/javascript" src="runtime.js"></script>
+      <script type="text/javascript" src="polyfills.js"></script>
+      <script type="text/javascript" src="vendor.js"></script>
+      <script type="text/javascript" src="main.js"></script>
     `));
 }

tests/e2e/tests/build/aot/aot-decorators.ts

@@ -22,8 +22,8 @@ export default function() {
       <app-test-component></app-test-component>
     `))
     .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/)));
 }

tests/e2e/tests/build/aot/aot-i18n.ts

@@ -24,10 +24,10 @@ export default function() {
       '<h1 i18n="An introduction header for this sample">Hello i18n!</h1>'))
     .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',
       '<p i18n>Other content</p>'))
     .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/));
         }
       })
     )

tests/e2e/tests/build/aot/aot-rebuild.ts

@@ -24,15 +24,15 @@ 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.');
       }
     })
     .then(() => appendToFile('src/app/app.component.html', '<p> $$_E2E_GOLDEN_VALUE_1 </p>'))
     .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.');