angular2-hmr: has been renamed to angular-hmr with a new logo #angular #angularjs…

  • inject AppStore here and update it ( ) { .
  • ( ); } ( );

    is only needed to detect that the dom is ready before bootstraping otherwise bootstrap.

  • This is needed because that dom is already ready during reloading.
  • In production you only need bootloader which just does this:

    You would bootstrap your app the normal way, in production, after dom is ready.

  • Also, in production, you should remove the loader:

angular-hmr – :fire: Angular Hot Module Replacement for Hot Module Reloading via @AngularClass

@AngularClass: angular2-hmr: has been renamed to angular-hmr with a new logo

#angular #angularjs…

We recommend upgrading to the latest Safari, Google Chrome, or Firefox.

Angular-HMR Hot Module Reloading for Webpack 2 and Angular 4. All versions of Angular will work with this module

Please see repository AngularClass/angular-seed for a working example.

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 || ! store.state) return; console.log(‘HMR store’, store); console.log(‘store.state.data:’, store.state.data) // inject AppStore here and update it // this.AppStore.update(store.state) if (‘restoreInputValues’ in store) { store.restoreInputValues(); } // change detection this.appRef.tick(); delete store.state; delete store.restoreInputValues; } 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.state = {data: ‘yolo’}; // store.state = Object.assign({}, appState) // save input values store.restoreInputValues = createInputTransfer(); // 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);

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

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, after dom is ready. Also, in production, you should remove the 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

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

GitHub

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.