Cannot find name 'createInputTransfer'.'hmrModule'.
indraraj26 opened this issue · comments
Indraraj commented
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