refactor: Refactor moduleId: __filename to moduleId: module.id, implement compat loader for webpack (#337)

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.

Author: PanayotCankov

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 {

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();
     }
-}
+}

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);
+};

templates/webpack.angular.js

@@ -68,7 +68,7 @@ module.exports = env => {
                 { test: /\.scss$/, exclude: /^.\/app\.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: [