Tutorial: Enable HMR in Angular CLI apps
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
.
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:
The remaining thing to do is to update src/main.ts
to use the file we just created:
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.