fix(build): hashes in prod builds now changes when ID change. (#3609)

package.json

@@ -122,7 +122,6 @@
     "walk-sync": "^0.2.6",
     "webpack": "2.1.0-beta.25",
     "webpack-dev-server": "2.1.0-beta.9",
-    "webpack-md5-hash": "0.0.5",
     "webpack-merge": "^0.14.0",
     "webpack-sources": "^0.1.3",
     "yam": "0.0.18"

packages/@ngtools/webpack/src/plugin.ts

@@ -309,6 +309,7 @@ export class AotPlugin implements Tapable {
         Object.keys(allLazyRoutes)
           .forEach(k => {
             const lazyRoute = allLazyRoutes[k];
+            k = k.split('#')[0];
             if (this.skipCodeGeneration) {
               this._lazyRoutes[k] = lazyRoute;
             } else {

packages/angular-cli/blueprints/ng2/files/package.json

@@ -20,7 +20,7 @@
     "@angular/http": "~2.3.1",
     "@angular/platform-browser": "~2.3.1",
     "@angular/platform-browser-dynamic": "~2.3.1",
-    "@angular/router": "3.2.3",
+    "@angular/router": "~3.3.1",
     "core-js": "^2.4.1",
     "rxjs": "5.0.0-rc.4",
     "ts-helpers": "^1.1.1",

packages/angular-cli/models/webpack-build-production.ts

@@ -1,6 +1,5 @@
 import * as path from 'path';
 import * as webpack from 'webpack';
-const WebpackMd5Hash = require('webpack-md5-hash');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 import {CompressionPlugin} from '../lib/webpack/compression-plugin';
 const autoprefixer = require('autoprefixer');
@@ -30,7 +29,6 @@ export const getWebpackProdConfigPartial = function(projectRoot: string,
     },
     plugins: [
       new ExtractTextPlugin('[name].[chunkhash].bundle.css'),
-      new WebpackMd5Hash(),
       new webpack.DefinePlugin({
         'process.env.NODE_ENV': JSON.stringify('production')
       }),

packages/angular-cli/models/webpack-build-utils.ts

@@ -78,6 +78,7 @@ export function makeCssLoaders(stylePaths: string[] = []) {
     // load global css as css files
     cssLoaders.push(...baseRules.map(({test, loaders}) => ({
       include: stylePaths, test, loaders: ExtractTextPlugin.extract({
+        remove: false,
         loader: ['css-loader', ...commonLoaders, ...loaders],
         fallbackLoader: 'style-loader'
       })

packages/angular-cli/package.json

@@ -101,7 +101,6 @@
     "walk-sync": "^0.2.6",
     "webpack": "2.1.0-beta.25",
     "webpack-dev-server": "2.1.0-beta.9",
-    "webpack-md5-hash": "0.0.5",
     "webpack-merge": "^0.14.0",
     "webpack-sources": "^0.1.3",
     "yam": "0.0.18"

tests/e2e/assets/webpack/test-app-weird/package.json

@@ -10,7 +10,7 @@
     "@angular/platform-browser": "~2.3.1",
     "@angular/platform-browser-dynamic": "~2.3.1",
     "@angular/platform-server": "~2.3.1",
-    "@angular/router": "~3.2.3",
+    "@angular/router": "~3.3.1",
     "@ngtools/webpack": "0.0.0",
     "core-js": "^2.4.1",
     "rxjs": "5.0.0-rc.4",

tests/e2e/assets/webpack/test-app/package.json

@@ -10,7 +10,7 @@
     "@angular/platform-browser": "~2.3.1",
     "@angular/platform-browser-dynamic": "~2.3.1",
     "@angular/platform-server": "~2.3.1",
-    "@angular/router": "~3.2.3",
+    "@angular/router": "~3.3.1",
     "@ngtools/webpack": "0.0.0",
     "core-js": "^2.4.1",
     "rxjs": "5.0.0-rc.4",

tests/e2e/tests/build/chunk-hash.ts

@@ -0,0 +1,56 @@
+import {oneLine} from 'common-tags';
+import * as fs from 'fs';
+
+import {ng} from '../../utils/process';
+import {writeFile} from '../../utils/fs';
+import {addImportToModule} from '../../utils/ast';
+
+
+export default function() {
+  const oldHashes: {[module: string]: string} = {};
+  const newHashes: {[module: string]: string} = {};
+  // First, collect the hashes.
+  return Promise.resolve()
+    .then(() => ng('generate', 'module', 'lazy', '--routing'))
+    .then(() => addImportToModule('src/app/app.module.ts', oneLine`
+      RouterModule.forRoot([{ path: "lazy", loadChildren: "./lazy/lazy.module#LazyModule" }])
+    `, '@angular/router'))
+    .then(() => ng('build', '--prod'))
+    .then(() => {
+      fs.readdirSync('./dist')
+        .forEach(name => {
+          if (!name.match(/(main|inline|styles|\d+)\.[a-z0-9]+\.bundle\.(js|css)/)) {
+            return;
+          }
+
+          const [module, hash] = name.split('.');
+          oldHashes[module] = hash;
+        });
+    })
+    .then(() => writeFile('src/app/app.component.css', 'h1 { margin: 5px; }'))
+    .then(() => writeFile('src/styles.css', 'body { background: red; }'))
+    .then(() => ng('build', '--prod'))
+    .then(() => {
+      fs.readdirSync('./dist')
+        .forEach(name => {
+          if (!name.match(/(main|inline|styles|\d+)\.[a-z0-9]+\.bundle\.(js|css)/)) {
+            return;
+          }
+
+          const [module, hash] = name.split('.');
+          newHashes[module] = hash;
+        });
+    })
+    .then(() => {
+      console.log('  Validating hashes...');
+      console.log(`  Old hashes: ${JSON.stringify(oldHashes)}`);
+      console.log(`  New hashes: ${JSON.stringify(newHashes)}`);
+
+      Object.keys(oldHashes)
+        .forEach(module => {
+          if (oldHashes[module] == newHashes[module]) {
+            throw new Error(`Module "${module}" did not change hash (${oldHashes[module]})...`);
+          }
+        });
+    });
+}

tests/e2e/tests/packages/webpack/test.ts

@@ -1,18 +1,14 @@
+import {normalize} from 'path';
 import {createProjectFromAsset} from '../../../utils/assets';
 import {exec} from '../../../utils/process';
 import {expectFileSizeToBeUnder} from '../../../utils/fs';
 
 
 export default function(skipCleaning: () => void) {
-  if (process.platform.startsWith('win')) {
-    // Disable the test on Windows.
-    return Promise.resolve();
-  }
-
   return Promise.resolve()
     .then(() => createProjectFromAsset('webpack/test-app'))
-    .then(() => exec('node_modules/.bin/webpack', '-p'))
-    .then(() => expectFileSizeToBeUnder('dist/app.main.js', 400000))
+    .then(() => exec(normalize('node_modules/.bin/webpack'), '-p'))
+    .then(() => expectFileSizeToBeUnder('dist/app.main.js', 420000))
     .then(() => expectFileSizeToBeUnder('dist/0.app.main.js', 40000))
     .then(() => skipCleaning());
 }

tests/e2e/tests/packages/webpack/weird.ts

@@ -1,3 +1,5 @@
+import {normalize} from 'path';
+
 import {createProjectFromAsset} from '../../../utils/assets';
 import {exec} from '../../../utils/process';
 import {updateJsonFile} from '../../../utils/project';
@@ -6,14 +8,9 @@ import {expectToFail} from '../../../utils/utils';
 
 
 export default function(skipCleaning: () => void) {
-  if (process.platform.startsWith('win')) {
-    // Disable the test on Windows.
-    return Promise.resolve();
-  }
-
   return Promise.resolve()
     .then(() => createProjectFromAsset('webpack/test-app-weird'))
-    .then(() => exec('node_modules/.bin/webpack', '-p'))
+    .then(() => exec(normalize('node_modules/.bin/webpack'), '-p'))
     .then(() => expectFileToExist('dist/app.main.js'))
     .then(() => expectFileToExist('dist/0.app.main.js'))
     .then(() => expectFileToExist('dist/1.app.main.js'))
@@ -25,7 +22,7 @@ export default function(skipCleaning: () => void) {
     .then(() => updateJsonFile('aotplugin.config.json', json => {
       json['skipCodeGeneration'] = true;
     }))
-    .then(() => exec('node_modules/.bin/webpack', '-p'))
+    .then(() => exec(normalize('node_modules/.bin/webpack'), '-p'))
     .then(() => expectFileToExist('dist/app.main.js'))
     .then(() => expectFileToExist('dist/0.app.main.js'))
     .then(() => expectFileToExist('dist/1.app.main.js'))