Closed indraraj26 closed 4 years ago
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
main.browser.ts