feat(serve): add --hmr flag

[jschwarty]

Add webpack-dev-server hot module replacement support when the --hmr flag is true.

[hansl]

Could you show a warning when this option is used with a link to some HMR documentation? The problem with HMR (and the reason this hasn't been done so far) is that not all angular applications are compatible, and there's no way to know. So we should at least warn the user that their app might break if they don't know what they're doing.

[hansl]

"Some documentation" in this case might be a wiki on our side and/or an external tutorial on HMR + ng2

[jschwarty]

Yes, I can add that.

[jschwarty]

I added a notice message to the console output when running ng serve --hmr that informs the user that HMR is on for the dev server but requires additional app code to take advantage of it. I included a link to the webpack HMR docs as that describes how the opt-in for HMR works, but I don't know which reliable resource to link to that shows how to do hmr with angular (probably best to have that on the cli wiki).

Although, it may be out of the scope of the cli to be responsible for guiding users into how to do hmr with angular since hmr for webpack dev server is opt-in (just enabling it does not activate your app code to use it). Could be looked at like using the --host or --port flags...cli is just providing the ability to leverage configuring the underlying dev server and what you do with it from there is up to you.

[beeman]

I'm happy to write some docs that help setting up HMR in a project built with the cli, it's just that I did not get it working yet.

I've looked at how angular2-hmr implements this, though their structure is quite different from what the cli generates.

@jschwarty if you could maybe provide a basic cli-generated project with HMR enabled, I'm happy to describe how to build it from a fresh ng init generated project.

[jschwarty]

I have a cli generated project that is using angular2-hmr and this new cli update. I can put that together into a sample peoject that you can use for that write up. Will let you know when I have that done...

…

On Wed, Nov 30, 2016, 11:56 PM Bram Borggreve ***@***.***> wrote: I'm happy to write some docs that help setting up HMR in a project built with the cli, it's just that I did not get it working yet. I've looked at how angular2-hmr <https://github.com/AngularClass/angular2-hmr> implements this, though their structure is quite different from what the cli generates. @jschwarty <https://github.com/jschwarty> if you could maybe provide a basic cli-generated project with HMR enabled, I'm happy to describe how to build it from a fresh ng init generated project. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#3330 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABL4ZBSc5uJOOddw_IWP-oXvQkT6EbZiks5rDn2_gaJpZM4LAsKw> .

[born2net]

would be sooooo awesome if we can have an example of ng-cli with HMR
TX

Sean

[jschwarty]

@beeman
https://github.com/jschwarty/angularcli-hmr-example
Uses @angularclass/hmr package.
Has documentation in the readme.md about HMR stuff.

[hansl]

@jschwarty re

cli is just providing the ability to leverage configuring the underlying dev server and what you do with it from there is up to you.

Agreed, but a lot of people will blame us if they use HMR wrongly in a CLI generated project. I want to avoid issues.

[born2net]

tx!!!!

[hansl]

LGTM. Thanks.

[born2net]

for me hmr was the killer app ng-cli needed... so now really no need for using webpack directly!!!!

[jschwarty]

@hansl re

Agreed, but a lot of people will blame us if they use HMR wrongly in a CLI generated project. I want to avoid issues.

Cool, I agree with avoiding those issues! So where would be the best place to contribute some docs to the cli to help explain HMR and possible usages with a cli project?

[hansl]

The wiki would be the right place, but I’m not sure if you have access. A markdown file added to `docs/wiki/` would be nice. We have a plan somewhere to move the wiki to that directory and update it when that directory changes.

…

On Dec 1, 2016, 11:51 AM -0800, Justin Schwartzenberger ***@***.***>, wrote: @hansl re > Agreed, but a lot of people will blame us if they use HMR wrongly in a CLI generated project. I want to avoid issues. Cool, I agree with avoiding those issues! So where would be the best place to contribute some docs to the cli to help explain HMR and possible usages with a cli project? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[beeman]

@jschwarty thanks for the project. I will write down the steps to get there from a fresh project.

[born2net]

@beeman tx please update here when done so I can checkout

[beeman]

I created a tutorial that covers setting up HMR with a new app scaffold with angular-cli.

https://medium.com/@beeman/1b0d13b80130

@born2net please let me know if you have any comments. Feel free to post them here, or create an issue on that repo.

@hansl please let me know if you like to see changes in order to get it in the wiki here.

[born2net]

will do, tx!!!

[jwuliger]

Great stuff!!

[beeman]

@born2net decided to move the tutorial here: https://medium.com/@beeman/1b0d13b80130 , feel free to ping me for any comments.

[born2net]

great tx!

[born2net]

maybe add a link to https://github.com/jschwarty/angularcli-hmr-example
as well in blog

[beeman]

@born2net good tip. Though I've linked to the example built using this tutorials so I can keep it updated and reference the commits.

[born2net]

ok tx!

[born2net]

In latest angular-cli: 1.0.0-beta.22 getting exceptions....

Here is the PR: #3384

[mattdistefano]

@jschwarty Do you have an example of this working w/ lazy-loaded routes?

[fabien0102]

@jschwarty I found this example https://github.com/jschwarty/angularcli-hmr-example but a little doc could be useful 😄

[beeman]

@fabien0102 there's some details in the post I put up on Medium: https://medium.com/@beeman/tutorial-enable-hrm-in-angular-cli-apps-1b0d13b80130 , please let me know if anything is unclear.

[fabien0102]

@beeman Great! I think you can add this link into angular-cli docs 😉 (It’s always better if all information are consolidate in one place)

[montella1507]

@beeman are there any additional steps to "keep" HMR working? It worked like a charm in starter solution.

But now it works correctly only for components from 1 module. For another it has to reload entire page with error:

PatrickJS/angular-hmr#42 (comment)

The topic / documentation with common pitfalls in usage of HMR would be very appreciated by the community. Good work anyway!

[rxjs-space]

@jschwarty , @hansl , Hi, could we have a blueprint for a hmr starter like in the example? So, we can do ng new xyz --hmr and have the hmr setup already.

[landon-morin]

@beeman Is there a follow up tutorial on how to get HMR working with lazy loaded modules? I was able to follow your original tutorial and was able to get HMR working perfectly for anything that isn't lazy loaded. Unfortunately my project consists of a large amount of lazy loaded modules.

Is there anything I can do to fix this? Thanks!

[rob-balfre]

@rxjs-space I've opened a pull request with this new feature today. #5396

[beeman]

@landon-morin I have not tried it with lazy loaded modules yet. This is the issue to track it PatrickJS/angular-hmr#42

[intellix]

I'm guessing since this: #3940, we can create a separate entrypoint so we don't need HMR in production builds

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}