fix(AoT): stop using require.context in Angular apps (#574)

Calling `require.context` for the app directory adds a `ContextDependency` in webpack for it. That causes every change inside the app/ directory to emit a change event for the whole directory.
There's a logic in the TypeScript compiler host (from
[@ngtools/webpack](https://github.com/angular/angular-cli/blob/master/packages/ngtools/webpack/src/compiler_host.ts#L235))
that invalidates all files in the changed directory. The invalidation
removes all cached information for the virtual files produced by the
Angular AoT compilation (ngfactory files, etc.). Since these files are
not in the cache anymore, webpack tries to resolve them from the
filesystem and fails. The solution is to remove the `ContextDependency`
for the `app` dir, which should also make the rebuilds much faster.

fixes #566

Author: sis0k0

bundle-config-loader.js

@@ -16,7 +16,11 @@ module.exports = function(source) {
 
     if (loadCss) {
         source = `
-            require("nativescript-dev-webpack/load-application-css")(${angular});
+            require("${
+                angular ?
+                    'nativescript-dev-webpack/load-application-css-angular' :
+                    'nativescript-dev-webpack/load-application-css-regular'
+            }")();
             ${source}
         `;
     }

load-application-css-angular.js

@@ -0,0 +1,7 @@
+const loadCss = require("./load-application-css");
+
+module.exports = function() {
+    loadCss(function() {
+        global.registerModule("./app.css", () => require("~/app"));
+    });
+}

load-application-css-regular.js

@@ -0,0 +1,8 @@
+const loadCss = require("./load-application-css");
+
+module.exports = function() {
+    loadCss(function() {
+        const appCssContext = require.context("~/", false, /^\.\/app\.(css|scss|less|sass)$/);
+        global.registerWebpackModules(appCssContext);
+    });
+}

load-application-css.js

@@ -1,14 +1,8 @@
-module.exports = function(isAngular) {
+module.exports = function (loadModuleFn) {
     const application = require("tns-core-modules/application");
     require("tns-core-modules/ui/styling/style-scope");
 
-    if (isAngular) {
-        global.registerModule("./app.css", () => require("~/app"));
-    } else {
-        const appCssContext = require.context("~/", false, /^\.\/app\.(css|scss|less|sass)$/);
-        global.registerWebpackModules(appCssContext);
-    }
+    loadModuleFn();
 
     application.loadAppCss();
 }
-

plugins/NativeScriptSnapshotPlugin/index.js

@@ -45,7 +45,13 @@ exports.NativeScriptSnapshotPlugin = (function() {
 
         let snapshotEntryContent = "";
         if (includeApplicationCss) {
-            snapshotEntryContent += `require("nativescript-dev-webpack/load-application-css")(${options.angular});`;
+            snapshotEntryContent += `
+            require("${
+                options.angular ?
+                    'nativescript-dev-webpack/load-application-css-angular' :
+                    'nativescript-dev-webpack/load-application-css-regular'
+            }")();
+            `;
         }
         snapshotEntryContent += [ ...requireModules, ...internalRequireModules]
             .map(mod => `require('${mod}')`).join(";");