Tutorial: Enable HMR in Angular CLI apps

4 min readDec 2, 2016

In this tutorial I explain how to get Hot Module Replacement (HMR) working with an app created with Angular CLI.

The action plan

The first thing we need to do is make sure we have an up-to-date version of Angular CLI installed.

When we have the right version of Angular CLI installed we will create a new app and configure our app by adding a new environment to the Angular CLI config that enables HMR.

The last step is to add the module that actually does the HMR, and update our app to use that module if we are in an environment that has HMR enabled.

Let’s get to it!

Install the right version of Angular CLI

Run the command ng version to determine your version of Angular CLI:

$ ng --version 
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.0.6
node: 7.10.0
os: darwin x64

If your version is lower than 1.0.0 or if you don’t have Angular CLI installed at all you can run this command to get the latest and greatest:

$ npm install -g @angular/cli@latest

Scaffold a new project

In this step we will create a new project using ng new and cd into the new directory:

$ ng new tutorial-angular-cli-hmr
$ cd tutorial-angular-cli-hmr

The ng new command creates a new directory, scaffolds our new app inside that directory and installs the required packages using npm which can take a while.

Add environment for HMR

In this step will configure the Angular CLI environments and define in which environment we enable HMR.

We will start out by adding and changing files in the src/environments/ directory:

First we create a file called src/environments/environment.hmr.ts with the following contents:

export const environment = {
 production: false,
 hmr: true
};

Then we edit src/environments/environment.prod.ts and change the environment to this:

export const environment = {
 production: true,
 hmr: false
};

Lastly we edit src/environments/environment.ts and change the environment to:

export const environment = {
 production: false,
 hmr: false
};

To enable the new environment we need to update .angular-cli.json in the project root. Open the file and add the new environment to the existing environments object:

...
    "environmentSource": "environments/environment.ts",
    "environments": {
      "dev": "environments/environment.ts",
      "hmr": "environments/environment.hmr.ts",
      "prod": "environments/environment.prod.ts"
    },
...

The final thing we do in this step is update our package.json. Inside the scripts block we add a shortcut to run ng serve with the required parameters to load HMR and the new environment:

...
  "scripts": {
    "start": "ng serve",
    "hmr": "ng serve --hmr -e=hmr",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  }
...

Adding this option to the scripts will allow you to start the HMR-enabled development environment by running npm run hmr.

💡 Related commit of this step

Add dependency for @angular/hmr and configure app

Now that everything is in place to enable HMR the last thing to do is make a few changes to our app to make the magic happen.

First we install the angular2-hmr module as a dev-dependency:

$ npm install --save-dev @angularclass/hmr

Next we create a file called src/hmr.ts where configure the module:

src/hmr.ts

The remaining thing to do is to update src/main.ts to use the file we just created:

src/main.ts

💡Related commit of this step

Starting the development environment with HMR enabled

Now that everything is set up we can run the new configuration:

$ npm run hmr

When starting the server Webpack will tell you that it’s enabled:

NOTICE Hot Module Replacement (HMR) is enabled for the dev server.

Now if you make changes to one of your components they changes should be visible automatically, without a complete browser refresh.

Try for instance updating the title property in src/app/app.components.ts and you will see the updated title appear in your browser after WebPack did it’s rebuilding.

You can find an example of the app I created in this tutorial here:
https://github.com/beeman/tutorial-angular-cli-hmr/

If you have any questions or issues getting this to work feel free to hit me up in the comments or on Twitter!

Enjoy!

Credits

Justin Schwartzenberger for adding the --hmr option to angular-cli and explaining me how to use it.
AngularClass for the angular2-hmr module.
The whole Angular Community for being just plain awesome!

Updates

2017–05–25: Updated tutorial and example repo for the latest version of Angular CLI

Need help?

Need support for your Angular, Ionic, Firebase, NodeJS or TypeScript project? Looking for long-term mentorship? Feel free to book a 1-on-1 session with me on CodeMentor.