Nativescript-angular: HMR does not work for Angular projects, containing lazy loaded modules and the code snippet

[ageorgieva]

Environment
CLI: @rc

To Reproduce
Create Master Detail NG app
Add nativescript-dev-webpackа@next
Add nativescript-angular@next
Add the code snippet from: https://github.com/NativeScript/nativescript-angular/wiki/HMR in main.ts file
Deploy on device.

Expected behavior
App should refresh the changes.

Actual behavior
The app is restating and there are info messages in the Console.

Additional context
Related to https://github.com/NativeScript/NativeScript/issues/6398

[etabakov]

Thanks to @vakrilov, we found some manual steps that looks like are valid workaround:

1. To every lazy loaded NgModule that you want to be hot module replaced add the following snippet:

// imports ...

if (module['hot']) {
    module['hot'].accept();
}

@NgModule({ 
    imports: [

1. Register onBeforeLivesync and onAfterLivesync callbacks to preserve the URL you are app is navigate to as per this Gist:

_livesync-navigation.ts_

import { Router } from "@angular/router";
import { onBeforeLivesync, onAfterLivesync } from "nativescript-angular/platform-common";
import { RouterExtensions } from "nativescript-angular/router";
import { NgZone } from "@angular/core";
 let cachedUrl: string;
onBeforeLivesync.subscribe(moduleRef => {
    console.log("#### onBeforeLivesync");
    if (moduleRef) {
        const router = <Router>moduleRef.injector.get(Router);
        cachedUrl = router.url;
        console.log("-------> Caching URL: " + cachedUrl);
    }
});
 onAfterLivesync.subscribe(({ moduleRef, error }) => {
    console.log(`#### onAfterLivesync moduleRef: ${moduleRef} error: ${error}`);
    if (moduleRef) {
        const router = <RouterExtensions>moduleRef.injector.get(RouterExtensions);
        const ngZone = <NgZone>moduleRef.injector.get(NgZone);
        if (router && cachedUrl) {
          ngZone.run(() => { // <--  should be wrapped in ngZone
            router.navigateByUrl(cachedUrl, { animated: false });
          });
        }
    }
}); 

1. Import the livesync-navigation to your main module (main.ts)

[marklanhamhc]

I've followed all the instructions but now I'm getting a new error:

ERROR in ../node_modules/nativescript-dev-webpack/load-application-css-angular.js Module not found: Error: Can't resolve 'css-loader' in '/Applications/MAMP/htdocs/MyApp/app' @ ../node_modules/nativescript-dev-webpack/load-application-css-angular.js 5:49-65 @ ./main.ts

[sis0k0]

This issue should be fixed with https://github.com/NativeScript/nativescript-dev-webpack/commit/6a9db32b9ef0205194d017f1803d2a5c6d21b4b8.
The fix will be part of the 0.19.0 release of nativescript-dev-webpack.

[webia1]

Still an issue: HMR does not work if any router resolve involved.