I'm trying to implement HMR on hybrid angular application using downgradeModule strategy and it just fails. I came here from another issue Can an Angular 5/1.x hybrid app support HMR? because there is no accepted answer and @scipper answer can't work i think (explanation below).
I set up webpack configuration (not ng-cli, custom config) with HMR (added new webpack.HotModuleReplacementPlugin(), added devServer.hot:true and other stuff) and i can see it is working, my entry file is reloading without full page reload with new sources and webpack applied hot update very well, but angular and angularjs applications are not working (working with old cached code).
My plan is:
1) add module hot accept to the entry file .
2) destroy angular.js app if it is exists (with $rootScope destroy?) .
3) destroy root angular.js app node if it is exists .
4) build angular module with code like
// bootstrap you new Angular 7 main module
const bootstrapFn = (extraProviders) => {
const platformRef = platformBrowserDynamic(extraProviders);
return platformRef.bootstrapModule(MyAngularSevenModule);
};
const downgradedModule = downgradeModule(bootstrapFn);
5) invoke or reinvoke angularjs module and dependencies + my angular module - it is my main problem i think .
6) bootstrap the angularjs application (or $compile + $digest) .
Already tried:
- https://github.com/PatrickJS/angular-hmr - doesn't work because of downgradeModule strategy (root node is ajs) .
- https://github.com/vitaliy-bobrov/angular-hot-loader - a lot of errors because of provider and other interceptors are not implemented .
- https://github.com/noppa/ng-hot-reload
I expected that bootstrap will update cached angular entities, but after hmr reload angular uses old controllers/components/directives (with fresh code in source tab).
Any suggestions?
I have wrong setup in entry file, @scipper was right, it is working. But with this tactic we are reloading whole application (and losing any state), i want to find solution to restart changed part only.