feat(@angular/cli): shorten output filenames

Author: clydin

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