universal: Angular Universal HMR generates errors and doesnt reload browser.

Bug Report

What is the expected behavior?

I’ve updated to Angular 9 --next to try out the new SSR HMR feature.

Following on from this: https://github.com/angular/universal/issues/1022

What is the current behavior?

After saving source code changes there is a 20-30 second compilation step and i still have to manually reload the browser to see the change. also generates EADDRESSINUSE error. worth noting: source code updates are now at least working - with manual browser refresh - but its not very efficient HMR.


Hash: 6e30d403d281f596bd9c
Time: 18935ms
Built at: 12/17/2019 1:04:07 PM
      Asset      Size  Chunks                          Chunk Names
    main.js  6.38 MiB    main  [emitted]        [big]  main
main.js.map  6.91 MiB    main  [emitted] [dev]         main
Entrypoint main [big] = main.js main.js.map
chunk {main} main.js, main.js.map (main) 6.02 MiB [entry] [rendered]

Compiled successfully.

Date: 2019-12-17T13:04:50.203Z - Hash: 2c71f08bdf2acdc697dc
4 unchanged chunks
chunk {main} main.js, main.js.map (main) 72.8 kB [initial] [rendered]
Time: 9084ms
Hash: 7a89cefb5aa17da58743
Time: 7750ms
Built at: 12/17/2019 1:04:50 PM
      Asset      Size  Chunks                          Chunk Names
    main.js  6.38 MiB    main  [emitted]        [big]  main
main.js.map  6.91 MiB    main  [emitted] [dev]         main
Entrypoint main [big] = main.js main.js.map
chunk {main} main.js, main.js.map (main) 6.02 MiB [entry] [rendered]
95% emitting
Compiled successfully.
/app/angular/ssr/dist/server/main.js:166079
                            throw error;
                            ^

Error: listen EADDRINUSE: address already in use :::45287
    at Server.setupListenHandle [as _listen2] (net.js:1308:16)
    at listenInCluster (net.js:1356:12)
    at Server.listen (net.js:1444:7)
    at Function.listen (/app/angular/ssr/dist/server/main.js:136360:24)
    at run (/app/angular/ssr/dist/server/main.js:168392:12)
    at Object../server.ts (/app/angular/ssr/dist/server/main.js:168398:5)
    at __webpack_require__ (/app/angular/ssr/dist/server/main.js:20:30)
    at Object.0 (/app/angular/ssr/dist/server/main.js:168951:18)
    at __webpack_require__ (/app/angular/ssr/dist/server/main.js:20:30)
    at /app/angular/ssr/dist/server/main.js:84:18
Emitted 'error' event on Server instance at:
    at emitErrorNT (net.js:1335:8)
    at ZoneDelegate.invokeTask (/app/angular/ssr/dist/server/main.js:166308:35)
    at Zone.runTask (/app/angular/ssr/dist/server/main.js:166075:51)
    at ZoneTask.invokeTask (/app/angular/ssr/dist/server/main.js:166390:38)
    at ZoneTask.invoke (/app/angular/ssr/dist/server/main.js:166379:52)
    at data.args.<computed> (/app/angular/ssr/dist/server/main.js:167330:63)
    at processTicksAndRejections (internal/process/task_queues.js:84:21) {
  code: 'EADDRINUSE',
  errno: -98,
  syscall: 'listen',
  address: '::',
  port: 45287
}


Date: 2019-12-17T13:05:06.761Z - Hash: 1b5177c4533831095b50
4 unchanged chunks
chunk {main} main.js, main.js.map (main) 72.8 kB [initial] [rendered]
Time: 13288ms
Hash: 2a062acd0fef5181acfd
Time: 11399ms
Built at: 12/17/2019 1:05:06 PM
      Asset      Size  Chunks                          Chunk Names
    main.js  6.38 MiB    main  [emitted]        [big]  main
main.js.map  6.91 MiB    main  [emitted] [dev]         main
Entrypoint main [big] = main.js main.js.map
chunk {main} main.js, main.js.map (main) 6.02 MiB [entry] [rendered]

Compiled successfully.

What modules are related to this issue?

- [ ] aspnetcore-engine
- [ x] builders
- [ x] common
- [x ] express-engine
- [ ] hapi-engine
- [ ] module-map-ngfactory-loader

Minimal reproduction with instructions:

Starting point: Angular 8 new new app.

update to Angular --next and serve ssr

ng update @angular/cli @angular/core @nguniversal/express-engine --next
ng run <projectName>:serve-ssr

What is the use-case or motivation for changing an existing behavior?

Recompilation of source code changes is generating errors and is very slow.

Environment:

express engine

bash-5.0# ng version

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


Angular CLI: 9.0.0-rc.6
Node: 13.3.0
OS: linux x64

Angular: 9.0.0-rc.6
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-rc.6
@angular-devkit/build-angular     0.900.0-rc.6
@angular-devkit/build-optimizer   0.900.0-rc.6
@angular-devkit/build-webpack     0.900.0-rc.6
@angular-devkit/core              9.0.0-rc.6
@angular-devkit/schematics        9.0.0-rc.6
@ngtools/webpack                  9.0.0-rc.6
@nguniversal/builders             9.0.0-next.9
@nguniversal/common               9.0.0-next.9
@nguniversal/express-engine       9.0.0-next.9
@schematics/angular               9.0.0-rc.6
@schematics/update                0.900.0-rc.6
rxjs                              6.5.3
typescript                        3.6.4
webpack                           4.41.2

Is there anything else we should know?

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 24

Commits related to this issue

Most upvoted comments

Also it is important to note that this builder DOESN’T offer HMR. But rather a live browser reload.