Package Exports

@angularclass/hmr

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@angularclass/hmr) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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