CODEWITHSUNDEEP
angularwebpack-hmrhot-module-replacement
M Fuat
M Fuat

Reputation: 1440

How to implement HMR (Hot Module Reload ) in my Angular 2 project (step-by-step)?

I am very new to Angular 2 and I want to implement HMR to my Angular 2 project ( because the big time waiting until the page reload is very confusing for me ) .

Upvotes: 2

Views: 1783

Answers (1)

charlie_pl
charlie_pl

Reputation: 3094

What kind of a build tool do you use? Systemjs or webpack?

If you are using webpack there are few things you can do to make your builds faster (generally webpack is recomended tool for angular2 projects by angular team)

  • Divide your application in application, vendor and polyfills part:

Code:

entry: {
    app: [ helpers.root('src/main.browser')],
    vendor: [helpers.root('src/vendor.browser')],
    polyfills: [helpers.root('src/polyfills.browser.ts')]
},

This will speed up your repeated builds if you use --watch mode -> only the changed files will be reloaded.

  • To speed up first build consider using dll -> dynamically linked libraries

Please take a look at https://github.com/qdouble/angular-webpack2-starter.git (this repository seems more useful than the one made by angular team)

  • When you've made this improvements it's finally time to implement HMR.

Unfortunately I am too figuring this out right now, so i can't help much. Fortunately two previous steps speed up build from ~20s on my computer to almost instant + page reload, so ~5s total.

The link to git repo I've provided should be helpful in figuring things out.

You should do 3 setups: one building dlls, one for dev build using pre-build dlls and third one optimized for production, slow and painful, but producing small output files.

Upvotes: 1

Related Questions