From 093067569b6e3d651731d956b2fb0db471edadcd Mon Sep 17 00:00:00 2001
From: Panayot Cankov <panayot.cankov@telerik.com>
Date: Mon, 11 Dec 2017 10:43:00 +0200
Subject: [PATCH] refactor: Refactor moduleId: __filename to moduleId:
 module.id, implement compat loader for webpack

The angular 5 framework will typecheck the moduleId is a string,
while in webpack scenarios the moduleId is ignored and relative paths
are handled by the angular compiler and the webpack loaders,
module.id is number and fails the typeschecks.

Implemented a loader that will strip the moduleId: module.id when
compiled with webpack, the moduleId: module.id is still necessary for development without webpack.

As a reminder if we manage to setup webpack for watch and debug,
we can recommend removing all moduleId: module.id occurences and delete the loader.
---
 .../AngularApp/app/item/item-detail.component.ts |  2 +-
 demo/AngularApp/app/item/items.component.ts      |  4 ++--
 moduleid-compat-loader.js                        | 16 ++++++++++++++++
 templates/webpack.angular.js                     |  2 +-
 4 files changed, 20 insertions(+), 4 deletions(-)
 create mode 100644 moduleid-compat-loader.js

diff --git a/demo/AngularApp/app/item/item-detail.component.ts b/demo/AngularApp/app/item/item-detail.component.ts
index a9d6c6fa..9183f787 100644
--- a/demo/AngularApp/app/item/item-detail.component.ts
+++ b/demo/AngularApp/app/item/item-detail.component.ts
@@ -6,7 +6,7 @@ import { ItemService } from "./item.service";
 
 @Component({
     selector: "ns-details",
-    moduleId: __filename,
+    moduleId: module.id,
     templateUrl: "./item-detail.component.html",
 })
 export class ItemDetailComponent implements OnInit {
diff --git a/demo/AngularApp/app/item/items.component.ts b/demo/AngularApp/app/item/items.component.ts
index 9dac97ba..e81ae0a7 100644
--- a/demo/AngularApp/app/item/items.component.ts
+++ b/demo/AngularApp/app/item/items.component.ts
@@ -5,7 +5,7 @@ import { ItemService } from "./item.service";
 
 @Component({
     selector: "ns-items",
-    moduleId: __filename,
+    moduleId: module.id,
     styleUrls: ["./items.component.scss"],
     templateUrl: "./items.component.html",
 })
@@ -19,4 +19,4 @@ export class ItemsComponent implements OnInit {
     ngOnInit(): void {
         this.items = this.itemService.getItems();
     }
-}
\ No newline at end of file
+}
diff --git a/moduleid-compat-loader.js b/moduleid-compat-loader.js
new file mode 100644
index 00000000..ec8ec963
--- /dev/null
+++ b/moduleid-compat-loader.js
@@ -0,0 +1,16 @@
+/**
+ * When building NativeScript angular apps without webpack (`tns run android`) the moduleId: module.id is necessary.
+ * When building with webpack the angular compiler and webpack handle relative paths in the modules and no longer need moduleId
+ * to be set, however webpack emits numbers for module.id and angular has typecheck for moduleId to be a string.
+ */
+module.exports = function (source, map) {
+    this.cacheable();
+
+    // Strips occurences of `moduleId: module.id,`, since it is no longer needed for webpack builds
+    const noModuleIdsSource = source.replace(/moduleId\:\s*module\.id\s*(\,)?/g, result =>
+        // Try to preserve char count so sourcemaps may remain intact
+        "/*" + result.substring(2, result.length - 2) + "*/"
+    );
+
+    this.callback(null, noModuleIdsSource, map);
+};
\ No newline at end of file
diff --git a/templates/webpack.angular.js b/templates/webpack.angular.js
index ae429b18..cd711b91 100644
--- a/templates/webpack.angular.js
+++ b/templates/webpack.angular.js
@@ -66,7 +66,7 @@ module.exports = env => {
                 // SASS support
                 { test: /\.scss$/, use: ["raw-loader", "resolve-url-loader", "sass-loader"] },
                 // Compile TypeScript files with ahead-of-time compiler.
-                { test: /.ts$/, loader: "@ngtools/webpack" },
+                { test: /.ts$/, use: ["nativescript-dev-webpack/moduleid-compat-loader", "@ngtools/webpack"] },
             ],
         },
         plugins: [