refactor(HMR): print caught error's message (#760)

* style: lazy-ngmodule-hot-loader formatting

This is to format properly the `HMR_HANDLER` snippet in bundles.

* refactor(HMR): expose a variable

* refactor(HMR): print caught error message

Print caught error message on a `module.hot.check()` or a `module.hot.apply()` failure.

* refactor(HMR): add module context parameter default value

* refactor(HMR): module hot accept callback

* chore(demos): update webpack config files

* refactor: change a variable type

Author: vchimev

bundle-config-loader.js

@@ -12,7 +12,7 @@ module.exports = function (source) {
                 hmrUpdate();
             };
 
-            global.__hmrRefresh = function({ type, module }) {
+            global.__hmrRefresh = function({ type, module } = {}) {
                 if (initialHmrUpdate) {
                     return;
                 }

demo/AngularApp/app/main.ts

@@ -14,13 +14,15 @@ if (module["hot"]) {
         },
     }
 
-    // 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"]);
+    module["hot"].accept(["./app.module"], () => {
+        // Currently the context is needed only for application style modules.
+        const moduleContext = {};
+        global["__hmrRefresh"](moduleContext);
+    });
 }
 
-// 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, 
+// 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(options).bootstrapModule(AppModule);

demo/AngularApp/webpack.config.js

@@ -1,9 +1,11 @@
-const { join, relative, resolve, sep } = require("path");
+const { join, relative, resolve, sep, dirname } = require("path");
 
 const webpack = require("webpack");
 const nsWebpack = require("nativescript-dev-webpack");
 const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
 const { nsReplaceBootstrap } = require("nativescript-dev-webpack/transformers/ns-replace-bootstrap");
+const { nsReplaceLazyLoader } = require("nativescript-dev-webpack/transformers/ns-replace-lazy-loader");
+const { getMainModulePath } = require("nativescript-dev-webpack/utils/ast-utils");
 const CleanWebpackPlugin = require("clean-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
@@ -34,8 +36,8 @@ module.exports = env => {
         // The 'appPath' and 'appResourcesPath' values are fetched from
         // the nsconfig.json configuration file
         // when bundling with `tns run android|ios --bundle`.
-        appPath = "app",
-        appResourcesPath = "app/App_Resources",
+        appPath = "src",
+        appResourcesPath = "App_Resources",
 
         // You can provide the following flags when running 'tns run android|ios'
         aot, // --env.aot
@@ -45,7 +47,8 @@ module.exports = env => {
         sourceMap, // --env.sourceMap
         hmr, // --env.hmr,
     } = env;
-    const externals = (env.externals || []).map((e) => { // --env.externals
+    env.externals = env.externals || [];
+    const externals = (env.externals).map((e) => { // --env.externals
         return new RegExp(e + ".*");
     });
 
@@ -54,14 +57,34 @@ module.exports = env => {
 
     const entryModule = `${nsWebpack.getEntryModule(appFullPath)}.ts`;
     const entryPath = `.${sep}${entryModule}`;
+    const ngCompilerTransformers = [];
+    const additionalLazyModuleResources = [];
+    if (aot) {
+        ngCompilerTransformers.push(nsReplaceBootstrap);
+    }
+
+    // when "@angular/core" is external, it's not included in the bundles. In this way, it will be used
+    // directly from node_modules and the Angular modules loader won't be able to resolve the lazy routes
+    // fixes https://github.com/NativeScript/nativescript-cli/issues/4024
+    if (env.externals.indexOf("@angular/core") > -1) {
+        const appModuleRelativePath = getMainModulePath(resolve(appFullPath, entryModule));
+        if (appModuleRelativePath) {
+            const appModuleFolderPath = dirname(resolve(appFullPath, appModuleRelativePath));
+            // include the lazy loader inside app module
+            ngCompilerTransformers.push(nsReplaceLazyLoader);
+            // include the new lazy loader path in the allowed ones
+            additionalLazyModuleResources.push(appModuleFolderPath);
+        }
+    }
 
     const ngCompilerPlugin = new AngularCompilerPlugin({
         hostReplacementPaths: nsWebpack.getResolver([platform, "tns"]),
-        platformTransformers: aot ? [nsReplaceBootstrap(() => ngCompilerPlugin)] : null,
+        platformTransformers: ngCompilerTransformers.map(t => t(() => ngCompilerPlugin)),
         mainPath: resolve(appPath, entryModule),
         tsConfigPath: join(__dirname, "tsconfig.tns.json"),
         skipCodeGeneration: !aot,
         sourceMap: !!sourceMap,
+        additionalLazyModuleResources: additionalLazyModuleResources
     });
 
     const config = {
@@ -195,6 +218,7 @@ module.exports = env => {
                     test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
                     use: [
                         "nativescript-dev-webpack/moduleid-compat-loader",
+                        "nativescript-dev-webpack/lazy-ngmodule-hot-loader",
                         "@ngtools/webpack",
                     ]
                 },
@@ -225,9 +249,9 @@ module.exports = env => {
             ]),
             // Copy assets to out dir. Add your own globs as needed.
             new CopyWebpackPlugin([
-                { from: "fonts/**" },
-                { from: "**/*.jpg" },
-                { from: "**/*.png" },
+                { from: { glob: "fonts/**" } },
+                { from: { glob: "**/*.jpg" } },
+                { from: { glob: "**/*.png" } },
             ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
             // Generate a bundle starter script and activate it in package.json
             new nsWebpack.GenerateBundleStarterPlugin([

demo/JavaScriptApp/webpack.config.js

@@ -206,9 +206,9 @@ module.exports = env => {
             ]),
             // Copy assets to out dir. Add your own globs as needed.
             new CopyWebpackPlugin([
-                { from: "fonts/**" },
-                { from: "**/*.jpg" },
-                { from: "**/*.png" },
+                { from: { glob: "fonts/**" } },
+                { from: { glob: "**/*.jpg" } },
+                { from: { glob: "**/*.png" } },
             ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
             // Generate a bundle starter script and activate it in package.json
             new nsWebpack.GenerateBundleStarterPlugin([

demo/TypeScriptApp/webpack.config.js

@@ -220,9 +220,9 @@ module.exports = env => {
             ]),
             // Copy assets to out dir. Add your own globs as needed.
             new CopyWebpackPlugin([
-                { from: "fonts/**" },
-                { from: "**/*.jpg" },
-                { from: "**/*.png" },
+                { from: { glob: "fonts/**" } },
+                { from: { glob: "**/*.jpg" } },
+                { from: { glob: "**/*.png" } },
             ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
             // Generate a bundle starter script and activate it in package.json
             new nsWebpack.GenerateBundleStarterPlugin([

hmr/hmr-update.js

@@ -2,5 +2,6 @@ module.exports = () => {
     const update = require("../hot");
     const fileSystemModule = require("tns-core-modules/file-system");
     const applicationFiles = fileSystemModule.knownFolders.currentApp();
-    return update(__webpack_require__["h"](), filename => applicationFiles.getFile(filename));
+    const latestHash = __webpack_require__["h"]();
+    return update(latestHash, filename => applicationFiles.getFile(filename));
 }

hot.js

@@ -94,7 +94,7 @@ function check(options) {
                     result(modules, appliedModules);
 
                     if (upToDate()) {
-                        //Do not modify message - CLI depends on this exact content to determine hmr operation status.
+                        // Do not modify message - CLI depends on this exact content to determine hmr operation status.
                         log.info(`Successfully applied update with hmr hash ${currentHash}. App is up to date.`);
                     }
 
@@ -103,21 +103,21 @@ function check(options) {
                 .catch((err) => {
                     const status = module.hot.status();
                     if (['abort', 'fail'].indexOf(status) >= 0) {
-                        //Do not modify message - CLI depends on this exact content to determine hmr operation status.
-                        log.warn(`Cannot apply update with hmr hash ${currentHash}.`);
-                        log.warn(err.stack || err.message);
+                        // Do not modify message - CLI depends on this exact content to determine hmr operation status.
+                        log.error(`Cannot apply update with hmr hash ${currentHash}.`);
+                        log.error(err.message || err.stack);
                     } else {
-                        log.warn(`Update failed: ${err.stack || err.message}`);
+                        log.error(`Update failed: ${err.message || err.stack}`);
                     }
                 });
         })
         .catch((err) => {
             const status = module.hot.status();
             if (['abort', 'fail'].indexOf(status) >= 0) {
-                log.warn(`Cannot check for update. ${refresh}`);
-                log.warn(err.stack || err.message);
+                log.error(`Cannot check for update. ${refresh}`);
+                log.error(err.message || err.stack);
             } else {
-                log.warn(`Update check failed: ${err.stack || err.message}`);
+                log.error(`Update check failed: ${err.message || err.stack}`);
             }
         });
 }

lazy-ngmodule-hot-loader.js

@@ -3,16 +3,14 @@ const { safeGet } = require("./projectHelpers");
 const LAZY_RESOURCE_CONTEXT = "$$_lazy_route_resource";
 const HOT_SELF_ACCEPT = "module.hot.accept();";
 const HOT_DISPOSE = `
-module.hot.dispose(() => {
-    // Currently the context is needed only for application style modules.
-    const moduleContext = "{}";
-    global.__hmrRefresh(moduleContext);
-});
-`;
+        module.hot.dispose(() => {
+            // Currently the context is needed only for application style modules.
+            const moduleContext = {};
+            global.__hmrRefresh(moduleContext);
+        });`;
 const HMR_HANDLER = `
     if (module.hot) {
-        ${HOT_SELF_ACCEPT}
-        ${HOT_DISPOSE}
+        ${HOT_SELF_ACCEPT}${HOT_DISPOSE}
     }
 `;