DevServerBuilder: HMR not work

[enten]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Area

- [x] devkit
- [ ] schematics

Versions

node --version
v8.9.4

npm --version
5.6.0

npx ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.0.0-rc.4
Node: 8.9.4
OS: linux x64
Angular: 6.0.0-rc.4
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.5.6
@angular-devkit/build-angular     0.5.6
@angular-devkit/build-optimizer   0.5.6
@angular-devkit/core              0.5.6
@angular-devkit/schematics        0.5.6
@ngtools/json-schema              1.1.0
@ngtools/webpack                  6.0.0-rc.4
@schematics/angular               0.5.6
@schematics/update                0.5.6
rxjs                              6.0.0-ucandoit-rc.6
typescript                        2.7.2
webpack                           4.5.0

Repro steps

Install @angular/cli@^6.0.0-rc.4 globally

npm install -g @angular/cli@^6.0.0-rc.4

Create new project

ng new example-app
cd example-app

Start dev server

ng serve --hmr

The log given by the failure

Uncaught Error: [HMR] Hot Module Replacement is disabled.
    at Object../node_modules/webpack/hot/dev-server.js (dev-server.js:60)
    at __webpack_require__ (bootstrap:74)
    at Object.0 (main.ts:12)
    at __webpack_require__ (bootstrap:74)
    at checkDeferredModules (bootstrap:43)
    at Array.webpackJsonpCallback [as push] (bootstrap:30)
    at main.js:1

Desired functionality

Use HMR with the DevServerBuilder.

Mention any other details that might be useful

HMR isn't work because the HotModuleReplacementPlugin is add to the webpack config after the webpack compiler instanciation.

We can fix that issue by instanciate the webpack compiler after webpack config customization.

Patch to fix HMR with the DevServerBuilder

diff --git a/packages/angular_devkit/build_angular/src/dev-server/index.ts b/packages/angular_devkit/build_angular/src/dev-server/index.ts
index 96e8843..ae3c6fb 100644
--- a/packages/angular_devkit/build_angular/src/dev-server/index.ts
+++ b/packages/angular_devkit/build_angular/src/dev-server/index.ts
@@ -99,7 +99,6 @@ export class DevServerBuilder implements Builder<DevServerBuilderOptions> {
         const browserBuilder = new BrowserBuilder(this.context);
         const webpackConfig = browserBuilder.buildWebpackConfig(
           root, projectRoot, host, browserOptions);
-        const webpackCompiler = webpack(webpackConfig);
         const statsConfig = getWebpackStatsConfig(browserOptions.verbose);
 
         let webpackDevServerConfig: WebpackDevServerConfigurationOptions;
@@ -169,6 +168,7 @@ export class DevServerBuilder implements Builder<DevServerBuilderOptions> {
           **
         `);
 
+        const webpackCompiler = webpack(webpackConfig);
         const server = new WebpackDevServer(webpackCompiler, webpackDevServerConfig);
 
         let first = true;

[filipesilva]

Fixed via #703