feat(Angular): apply changes in application styles at runtime with HMR

Author: vchimev

Diff for: bundle-config-loader.js

@@ -2,38 +2,61 @@ module.exports = function (source) {
     this.cacheable();
     const { angular = false, loadCss = true, registerModules = /(root|page)\.(xml|css|js|ts|scss)$/ } = this.query;
 
+    const hmr = `
+        if (module.hot) {
+            const fileSystemModule = require("tns-core-modules/file-system");
+            const applicationFiles = fileSystemModule.knownFolders.currentApp();
+
+            global.__hmrLivesyncBackup = global.__onLiveSync;
+            global.__onLiveSync = function () {
+                console.log("HMR: Sync...");
+                require("nativescript-dev-webpack/hot")(__webpack_require__.h(), (fileName) => applicationFiles.getFile(fileName));
+            };
+
+            global.__hmrRefresh = function({ type, module }) {
+                global.__hmrNeedReload = true;
+                setTimeout(() => {
+                    if(global.__hmrNeedReload) {
+                        global.__hmrNeedReload = false;
+                        global.__hmrLivesyncBackup({ type, module });
+                    }
+                });
+            }
+
+            global.__hmrInitialSync = true; // needed to determine if we are performing initial sync
+            global.__onLiveSync();
+        }
+    `;
+
+    const angularHmr = `
+        if (module.hot) {
+            const hmrUpdate = require("nativescript-dev-webpack/hmr").hmrUpdate;
+
+            global.__hmrLivesyncBackup = global.__onLiveSync;
+            global.__onLiveSync = function () {
+                console.log("HMR: Sync...");
+                hmrUpdate();
+            };
+
+            global.__hmrRefresh = function({ type, module }) {
+                setTimeout(() => {
+                    global.__hmrLivesyncBackup({ type, module });
+                });
+            };
+        }
+    `;
+
     source = `
         require("tns-core-modules/bundle-entry-points");
         ${source}
     `;
 
-    if (!angular && registerModules) {
-        const hmr = `
-            if (module.hot) {
-                const fileSystemModule = require("tns-core-modules/file-system");
-                const applicationFiles = fileSystemModule.knownFolders.currentApp();
-
-                global.__hmrLivesyncBackup = global.__onLiveSync;
-                global.__onLiveSync = function () {
-                    console.log("HMR: Sync...");
-                    require("nativescript-dev-webpack/hot")(__webpack_require__.h(), (fileName) => applicationFiles.getFile(fileName));
-                };
-
-                global.__hmrRefresh = function({ type, module }) {
-                    global.__hmrNeedReload = true;
-                    setTimeout(() => {
-                        if(global.__hmrNeedReload) {
-                            global.__hmrNeedReload = false;
-                            global.__hmrLivesyncBackup({ type, module });
-                        }
-                    });
-                }
-
-                global.__hmrInitialSync = true; // needed to determine if we are performing initial sync
-                global.__onLiveSync();
-            }
+    if (angular) {
+        source = `
+            ${angularHmr}
+            ${source}
         `;
-
+    } else if (registerModules) {
         source = `
             ${hmr}
             const context = require.context("~/", true, ${registerModules});

Diff for: demo/AngularApp/app/main.ts

@@ -1,10 +1,31 @@
 // this import should be first in order to load some required settings (like globals and reflect-metadata)
 import { platformNativeScriptDynamic } from "nativescript-angular/platform";
+import { AppOptions } from "nativescript-angular/platform-common";
 
 import { AppModule } from "./app.module";
 
+let options: AppOptions = {};
+
+if (module["hot"]) {
+    const hmrUpdate = require("nativescript-dev-webpack/hmr").hmrUpdate;
+
+    options.hmrOptions = {
+        moduleTypeFactory: () => AppModule,
+        livesyncCallback: (platformReboot) => {
+            console.log("HMR livesyncCallback: Sync...")
+            setTimeout(platformReboot, 0);
+        },
+    }
+
+    hmrUpdate();
+
+    // Path to your app module.
+    // You might have to change it if your module is in a different place.
+    module["hot"].accept(["./app.module"], global["__hmrRefresh"]);
+}
+
 // A traditional NativeScript application starts by initializing global objects, setting up global CSS rules, creating, and navigating to the main page. 
 // Angular applications need to take care of their own initialization: modules, components, directives, routes, DI providers. 
 // A NativeScript Angular app needs to make both paradigms work together, so we provide a wrapper platform object, platformNativeScriptDynamic, 
 // that sets up a NativeScript application and can bootstrap the Angular framework.
-platformNativeScriptDynamic().bootstrapModule(AppModule);
+platformNativeScriptDynamic(options).bootstrapModule(AppModule);

Diff for: demo/AngularApp/webpack.config.js

@@ -173,14 +173,15 @@ module.exports = env => {
                 // tns-core-modules reads the app.css and its imports using css-loader
                 {
                     test: /[\/|\\]app\.css$/,
-                    use: {
-                        loader: "css-loader",
-                        options: { minimize: false, url: false },
-                    }
+                    use: [
+                        "nativescript-dev-webpack/style-hot-loader",
+                        { loader: "css-loader", options: { minimize: false, url: false } }
+                    ]
                 },
                 {
                     test: /[\/|\\]app\.scss$/,
                     use: [
+                        "nativescript-dev-webpack/style-hot-loader",
                         { loader: "css-loader", options: { minimize: false, url: false } },
                         "sass-loader"
                     ]

Diff for: templates/webpack.angular.js

@@ -171,14 +171,15 @@ module.exports = env => {
                 // tns-core-modules reads the app.css and its imports using css-loader
                 {
                     test: /[\/|\\]app\.css$/,
-                    use: {
-                        loader: "css-loader",
-                        options: { minimize: false, url: false },
-                    }
+                    use: [
+                        "nativescript-dev-webpack/style-hot-loader",
+                        { loader: "css-loader", options: { minimize: false, url: false } }
+                    ]
                 },
                 {
                     test: /[\/|\\]app\.scss$/,
                     use: [
+                        "nativescript-dev-webpack/style-hot-loader",
                         { loader: "css-loader", options: { minimize: false, url: false } },
                         "sass-loader"
                     ]