angular2-hmr v0.8.1

Angular 2 Hot Module Replacement

Angular2-HMR

This module requires Angular 2.0.0-rc.1 or higher. Please see repository Angular 2 Webpack Starter for a working example.

main.browser.ts

function main(initialHMRstate) {
  // you must return
  return bootstrap(App, []);
}
/*
 * Hot Module Reload
 * experimental version by @gdi2290
 */
if (isDevelopment) {
  // activate hot module reload
  let ngHmr = require('angular2-hmr');
  ngHmr.hotModuleReplacement(main, module); // pass the main function
} else {
  // bootstrap when document is ready
  document.addEventListener('DOMContentLoaded', () => main());
}

app.service.ts

import {HmrState} from 'angular2-hmr';

export class AppState {
  // @HmrState() is used by HMR to track the state of any object during a hot module replacement
  @HmrState() _state = { };
}

app.component.ts

import {HmrState} from 'angular2-hmr';
@Component({ /*... */ })
export class App {

  @HmrState() localState = {};
    
}

In production set NODE_ENV to "production" to noop HmrState or strip it from your code

    new NormalModuleReplacementPlugin(
      /angular2-hmr/,
      path.join(__dirname, 'node_modules', 'angular2-hmr', 'prod.js')
    ),

enjoy — AngularClass

##AngularClass

Learn AngularJS, Angular 2, and Modern Web Development from the best. Looking for corporate Angular training, want to host us, or Angular consulting? patrick@angularclass.com