Comments (10)
Actually I got it working. Just ignore the angular cli instructions. The only thing to take from that is using an environment to enable/disable hmr. Here's the relevant lines from my main.ts
const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);
if (environment.hmr) {
if (module[ 'hot' ]) {
bootstrap().then((ngModuleRef) => {
return hmrModule(ngModuleRef, module);
}).catch(err => console.log(err));
} else {
console.error('HMR is not enabled for webpack-dev-server!');
console.log('Are you using the --hmr flag for ng serve?');
}
} else {
bootstrap().catch(err => console.log(err));
}
Otherwise follow the instructions in this repo's readme. This is tested with angular 7 - so this ticket could probably be closed. Perhaps a section on using with angular cli could be added that warns against using angular-cli's documentation.
from angular-hmr.
Thank you!
After tinkering a bit with your suggestion, I got it working too.
Here are my app.module.ts
and main.ts
if anyone's interested:
main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { hmrModule } from '@angularclass/hmr';
if (environment.production) {
enableProdMode();
}
const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);
if (environment.hmr) {
if (module[ 'hot' ]) {
// hmrBootstrap(module, bootstrap);
bootstrap().then((ngModuleRef) => {
return hmrModule(ngModuleRef, module);
}).catch(err => console.log(err));
} else {
console.error('HMR is not enabled for webpack-dev-server!');
console.log('Are you using the --hmr flag for ng serve?');
}
} else {
bootstrap().catch(err => console.log(err));
}
app.module.ts
import { removeNgStyles, createNewHosts, createInputTransfer } from '@angularclass/hmr';
import { NgModule, ApplicationRef } from "@angular/core";
import { AppComponent } from "./app.component";
...
@NgModule({
declarations: [
AppComponent,
...
],
imports: [
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
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
}
}
And I agree, a clearer documentation would be nice.
from angular-hmr.
I couldn't get it working either. I think the issue is the angular cli wiki instructions don't mesh with the instructions in this repo.
- Angular cli wiki does not make use of hmrModule so functions like hmrOnInit are never called. This means we can't hook into things like saving ngrx state.
- Adding hmrModule calls the hook functions successfully. But I couldn't figure out how to configure it. I always get "The ng module AppModule has already been destroyed." when trying to use it.
from angular-hmr.
I created a small repo with a project in which HMR works for Angular 7.
Clone it, npm i
and ng serve --configuration hmr
, put some text in the input fields, change something in the code and you should see the changes while keeping what you put in the fields.
from angular-hmr.
I'm also having issues with this. Tried your code @Epono, but it does not work for me. I can see clearly in the console the logs stating the changes, but no changes are being done in the browser.
Besides, when I start my app, I can see a strange error:
I got my main.ts and my app.module.ts exactly as yours. Any idea or clue I may have passed?
Thanks in advance.
from angular-hmr.
Never encountered this error :/
Did you follow these instructions as well? Adding an environment and updating angular.json
Also, I run my projet with this command ng serve --configuration hmr
, I'm not sure what yours does (I'm really no expert in Angular)
from angular-hmr.
I created a small repo with a project in which HMR works for Angular 7.
Clone it,npm i
andng serve --configuration hmr
, put some text in the input fields, change something in the code and you should see the changes while keeping what you put in the fields.
I tried it out but it doesn't work for me.
from angular-hmr.
That's weird, I just tried it again with Angular 7.1.2 and it worked.
What's your problem exactly?
from angular-hmr.
@beelio i tried it and it works for me too
what did you try exactly? maybe a fork we can look at?
from angular-hmr.
still an issue, see here: https://stackoverflow.com/questions/55355133/angular-7-hmr-hot-module-replacement-does-not-work-if-any-route-resolve-invo
from angular-hmr.
Related Issues (20)
- The <app> is not removed upon hmr run HOT 3
- Async operations on HMR fails to update the view HOT 2
- seed points to an invalid repository HOT 4
- Back and forward cause route resolvers to get called one for each reload since full refresh
- HMR switches to default environment randomly HOT 1
- Webpack 4 / Angular 6 support HOT 6
- AngularJS 1 HOT 4
- Lazy Routes reload whole App HOT 22
- ngrx tutorial is not full HOT 1
- Q: how does reload exactly work. HOT 2
- HMR on ng build --watch
- How to remove the browser console monitoring file? HOT 1
- ionic 4 support HOT 1
- State is lost on module reload HOT 2
- Cannot find name 'createInputTransfer'.'hmrModule'.
- commonjs dependencies HOT 2
- 3.x Breaks IE11 support HOT 1
- @angularclass/hmr breaks angular 12.x builds HOT 1
- Publish the v4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-hmr.