{"action":"closed","issue":{"url":"https://api.github.com/repos/angular/devkit/issues/700","repository_url":"https://api.github.com/repos/angular/devkit","labels_url":"https://api.github.com/repos/angular/devkit/issues/700/labels{/name}","comments_url":"https://api.github.com/repos/angular/devkit/issues/700/comments","events_url":"https://api.github.com/repos/angular/devkit/issues/700/events","html_url":"https://github.com/angular/devkit/issues/700","id":314259551,"number":700,"title":"DevServerBuilder: HMR not work","user":{"login":"enten","id":977713,"avatar_url":"https://avatars2.githubusercontent.com/u/977713?v=4","gravatar_id":"","url":"https://api.github.com/users/enten","html_url":"https://github.com/enten","followers_url":"https://api.github.com/users/enten/followers","following_url":"https://api.github.com/users/enten/following{/other_user}","gists_url":"https://api.github.com/users/enten/gists{/gist_id}","starred_url":"https://api.github.com/users/enten/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/enten/subscriptions","organizations_url":"https://api.github.com/users/enten/orgs","repos_url":"https://api.github.com/users/enten/repos","events_url":"https://api.github.com/users/enten/events{/privacy}","received_events_url":"https://api.github.com/users/enten/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-04-13T21:45:20Z","updated_at":"2018-04-14T09:09:34Z","closed_at":"2018-04-14T09:09:34Z","author_association":"CONTRIBUTOR","body":"<!--\r\nIF YOU DON'T FILL OUT THE FOLLOWING INFORMATION YOUR ISSUE MIGHT BE CLOSED WITHOUT INVESTIGATING\r\n-->\r\n### Bug Report or Feature Request (mark with an `x`)\r\n```\r\n- [x] bug report -> please search issues before submitting\r\n- [ ] feature request\r\n```\r\n\r\n### Area\r\n```\r\n- [x] devkit\r\n- [ ] schematics\r\n```\r\n\r\n### Versions\r\n<!--\r\nOutput from: `node --version` and `npm --version`.\r\n  Windows (7/8/10). Linux (incl. distribution). macOS (El Capitan? Sierra? High Sierra?)\r\n-->\r\n\r\n```shell\r\nnode --version\r\nv8.9.4\r\n```\r\n\r\n```shell\r\nnpm --version\r\n5.6.0\r\n```\r\n\r\n```shell\r\nnpx ng --version\r\n\r\n     _                      _                 ____ _     ___\r\n    / \\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|\r\n   / △ \\ | '_ \\ / _` | | | | |/ _` | '__|   | |   | |    | |\r\n  / ___ \\| | | | (_| | |_| | | (_| | |      | |___| |___ | |\r\n /_/   \\_\\_| |_|\\__, |\\__,_|_|\\__,_|_|       \\____|_____|___|\r\n                |___/\r\n\r\n\r\nAngular CLI: 6.0.0-rc.4\r\nNode: 8.9.4\r\nOS: linux x64\r\nAngular: 6.0.0-rc.4\r\n... animations, cli, common, compiler, compiler-cli, core, forms\r\n... http, language-service, platform-browser\r\n... platform-browser-dynamic, router\r\n\r\nPackage                           Version\r\n-----------------------------------------------------------\r\n@angular-devkit/architect         0.5.6\r\n@angular-devkit/build-angular     0.5.6\r\n@angular-devkit/build-optimizer   0.5.6\r\n@angular-devkit/core              0.5.6\r\n@angular-devkit/schematics        0.5.6\r\n@ngtools/json-schema              1.1.0\r\n@ngtools/webpack                  6.0.0-rc.4\r\n@schematics/angular               0.5.6\r\n@schematics/update                0.5.6\r\nrxjs                              6.0.0-ucandoit-rc.6\r\ntypescript                        2.7.2\r\nwebpack                           4.5.0\r\n\r\n```\r\n\r\n### Repro steps\r\n<!--\r\nSimple steps to reproduce this bug.\r\nPlease include: commands run, packages added, related code changes.\r\nA link to a sample repo would help too.\r\n-->\r\n\r\n#### Install @angular/cli@^6.0.0-rc.4 globally\r\n```shell\r\nnpm install -g @angular/cli@^6.0.0-rc.4\r\n```\r\n\r\n#### Create new project\r\n```shell\r\nng new example-app\r\ncd example-app\r\n```\r\n\r\n#### Start dev server\r\n```shell\r\nng serve --hmr\r\n```\r\n\r\n### The log given by the failure\r\n<!-- Normally this include a stack trace and some more information. -->\r\n\r\n```\r\nUncaught Error: [HMR] Hot Module Replacement is disabled.\r\n    at Object../node_modules/webpack/hot/dev-server.js (dev-server.js:60)\r\n    at __webpack_require__ (bootstrap:74)\r\n    at Object.0 (main.ts:12)\r\n    at __webpack_require__ (bootstrap:74)\r\n    at checkDeferredModules (bootstrap:43)\r\n    at Array.webpackJsonpCallback [as push] (bootstrap:30)\r\n    at main.js:1\r\n```\r\n\r\n### Desired functionality\r\n<!--\r\nWhat would like to see implemented?\r\nWhat is the usecase?\r\n-->\r\n\r\nUse [HMR](https://webpack.js.org/concepts/hot-module-replacement/) with the [DevServerBuilder](https://github.com/angular/devkit/blob/master/packages/angular_devkit/build_angular/src/dev-server/index.ts).\r\n\r\n### Mention any other details that might be useful\r\n<!-- Please include a link to the repo if this is related to an OSS project. -->\r\n\r\nHMR isn't work because the [HotModuleReplacementPlugin](https://webpack.js.org/plugins/hot-module-replacement-plugin/) is add to the webpack config after the webpack compiler instanciation.\r\n\r\nWe can fix that issue by instanciate the webpack compiler after webpack config customization.\r\n\r\n#### Patch to fix HMR with the [DevServerBuilder](https://github.com/angular/devkit/blob/master/packages/angular_devkit/build_angular/src/dev-server/index.ts)\r\n\r\n```diff\r\ndiff --git a/packages/angular_devkit/build_angular/src/dev-server/index.ts b/packages/angular_devkit/build_angular/src/dev-server/index.ts\r\nindex 96e8843..ae3c6fb 100644\r\n--- a/packages/angular_devkit/build_angular/src/dev-server/index.ts\r\n+++ b/packages/angular_devkit/build_angular/src/dev-server/index.ts\r\n@@ -99,7 +99,6 @@ export class DevServerBuilder implements Builder<DevServerBuilderOptions> {\r\n         const browserBuilder = new BrowserBuilder(this.context);\r\n         const webpackConfig = browserBuilder.buildWebpackConfig(\r\n           root, projectRoot, host, browserOptions);\r\n-        const webpackCompiler = webpack(webpackConfig);\r\n         const statsConfig = getWebpackStatsConfig(browserOptions.verbose);\r\n \r\n         let webpackDevServerConfig: WebpackDevServerConfigurationOptions;\r\n@@ -169,6 +168,7 @@ export class DevServerBuilder implements Builder<DevServerBuilderOptions> {\r\n           **\r\n         `);\r\n \r\n+        const webpackCompiler = webpack(webpackConfig);\r\n         const server = new WebpackDevServer(webpackCompiler, webpackDevServerConfig);\r\n \r\n         let first = true;\r\n\r\n```"}}
{"actor":{"display_login":"filipesilva"}}