PatrickJS / angular-hmr

:fire: Angular Hot Module Replacement for Hot Module Reloading

Home Page:https://patrickjs.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Cannot find name 'createInputTransfer'.'hmrModule'.

indraraj26 opened this issue · comments

main.browser.ts

import { removeNgStyles, createNewHosts, bootloader } from "@angularclass/hmr";
import { ApplicationRef, NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpModule } from "@angular/http";
import { RouterModule } from "@angular/router";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/app.module";
import { AppComponent } from "./app/app.component";

@NgModule({
  bootstrap: [AppComponent],
  declarations: [AppComponent],
  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)
      // use `hmrModule` or the "@angularclass/hmr-loader"
      .then((ngModuleRef: any) => {
        // `module` global ref for webpackhmr
        // Don't run this in Prod
        return hmrModule(ngModuleRef, module);
      })
  );
}

// boot on document ready
bootloader(main);

ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.0.4
Node: 10.16.0
OS: win32 x64
Angular: 7.0.2
... common, compiler, compiler-cli, core, forms, http
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.10.4
@angular-devkit/build-angular     0.10.4
@angular-devkit/build-optimizer   0.10.4
@angular-devkit/build-webpack     0.10.4
@angular-devkit/core              7.0.4
@angular-devkit/schematics        7.0.4
@angular/animations               7.0.4
@angular/cdk                      7.1.1
@angular/cli                      7.0.4
@angular/fire                     5.1.2
@angular/material                 7.1.1
@ngtools/webpack                  7.0.4
@schematics/angular               7.0.4
@schematics/update                0.10.4
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.19.1