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

npm install @angularclass/hmr @angularclass/hmr-loader

This module requires Angular 2.0.0-rc.5 or higher. Please see repository Angular 2 Seed for a working example.

also download https://github.com/AngularClass/angular2-hmr-loader main.browser.ts

import { removeNgStyles, createNewHosts, bootloader } from '@angularclass/hmr';

@NgModule({
  bootstrap: [ App ],
  declarations: [ App ],
  imports: [
    // Angular 2
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot([], {
      useHash: true
    }),
    // app
    appModule
    // vendors
  ],
  providers: []
})
class MainModule {
  constructor(public appRef: ApplicationRef) {}
  hmrOnInit(store) {
    if (!store) return;
    console.log('HMR store', store);
    console.log('store.OHHAI:', store.OHHAI)
    // inject AppStore here and update it
    // this.AppStore.update(store)
  }
  hmrOnDestroy(store) {
    var cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
    // recreate elements
    store.disposeOldHosts = createNewHosts(cmpLocation)
    // inject your AppStore and grab state then set it on store
    // var appState = this.AppStore.get()
    store.OHHAI = 'yolo'
    // Object.assign(store, appState)
    // remove styles
    removeNgStyles();
  }
  hmrAfterDestroy(store) {
    // display new elements
    store.disposeOldHosts()
    delete store.disposeOldHosts;
    // anything you need done the component is removed
  }
}

export function main() {
  return platformBrowserDynamic().bootstrapModule(MainModule);
}

// boot on document ready
bootloader(main);

bootloader is only needed to detech that the dom is ready before bootstraping otherwise bootstrap. This is needed because that dom is already ready during reloading

Important Helpers

removeNgStyles
createNewHosts and disposeOldHosts
bootloader

Production

In production you only need bootloader which just does this

export function bootloader(main) {
  if (document.readyState === 'complete') {
    main()
  } else {
    document.addEventListener('DOMContentLoaded', main);
  }
}

you would bootstrap your app the normal way, in production, afer dom is ready. Also, in production, you should remove the loader

        {
          test: /\.ts$/,
          loaders: [
            'awesome-typescript-loader',
          ].concat(prod ? [] : '@angularclass/hmr-loader')
        },

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