fix: support platform specific files that are not directly imported anywhere in the app (e.g. when main.ts is platform specific).

Author: DimitarTachev

Diff for: package.json

@@ -100,6 +100,8 @@
   },
   "devDependencies": {
     "@ngtools/webpack": "~7.2.0",
+    "@angular/compiler": "~7.2.0",
+    "@angular/compiler-cli": "~7.2.0",
     "@types/jasmine": "^3.3.7",
     "@types/node": "^10.12.12",
     "@types/proxyquire": "1.3.28",

Diff for: plugins/NativeScriptAngularCompilerPlugin.ts

@@ -0,0 +1,28 @@
+import { parse, sep } from "path";
+import { AngularCompilerPlugin } from "@ngtools/webpack";
+
+export function getAngularCompilerPlugin(platform: string): any {
+    class NativeScriptAngularCompilerPlugin extends AngularCompilerPlugin {
+        // This is the bridge between the @ngtols/webpack loader and the AngularCompilerPlugin plugin itself:
+        // https://github.com/angular/angular-cli/blob/bf52b26219ffc16bed2dd55716e21773b415fd2a/packages/ngtools/webpack/src/loader.ts#L49
+        // The problem is that the loader does not call the `hostReplacementPaths` method when asking for the compiledFile.
+        // By overriding this method, we workaround this issue and support platform specific files from the loader 
+        // that are not compiled by the AngularCompilerPlugin plugin. e.g. main.ts is the webpack entry point and
+        // it's loaded by the @ngtools/webpack loader but its not compiled by the plugin because the TypeScript Compiler
+        // knowns only about main.android.ts and main.ios.ts (main.ts is not imported/required anywhere in the app).
+        getCompiledFile(file) {
+            try {
+                if (platform) {
+                    const parsed = parse(file);
+                    const platformFile = parsed.dir + sep + parsed.name + "." + platform + parsed.ext;
+                    return super.getCompiledFile(platformFile);;
+                }
+            }
+            catch (e) { }
+
+            return super.getCompiledFile(file);
+        }
+    }
+
+    return NativeScriptAngularCompilerPlugin;
+}

Diff for: plugins/index.js

@@ -3,5 +3,6 @@ module.exports = Object.assign({},
     require("./NativeScriptSnapshotPlugin"),
     require("./PlatformSuffixPlugin"),
     require("./PlatformFSPlugin"),
-    require("./WatchStateLoggerPlugin")
+    require("./WatchStateLoggerPlugin"),
+    require("./NativeScriptAngularCompilerPlugin")
 );

Diff for: templates/webpack.angular.js

@@ -12,8 +12,7 @@ const CopyWebpackPlugin = require("copy-webpack-plugin");
 const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
 const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
-const { AngularCompilerPlugin } = require("@ngtools/webpack");
-const hashSalt =  Date.now().toString();
+const hashSalt = Date.now().toString();
 
 module.exports = env => {
     // Add your custom Activities, Services and other Android app components here.
@@ -27,6 +26,7 @@ module.exports = env => {
         throw new Error("You need to provide a target platform!");
     }
 
+    const AngularCompilerPlugin = nsWebpack.getAngularCompilerPlugin(platform);
     const projectRoot = __dirname;
 
     // Default destination inside platforms/<platform>/...
@@ -261,10 +261,10 @@ module.exports = env => {
                 // configures the WebPack runtime to be generated inside the snapshot
                 // module and no `runtime.js` module exist.
                 (snapshot ? [] : ["./runtime"])
-                .concat([
-                    "./vendor",
-                    "./bundle",
-              ])
+                    .concat([
+                        "./vendor",
+                        "./bundle",
+                    ])
             ),
             // For instructions on how to set up workers with webpack
             // check out https://github.com/nativescript/worker-loader

Diff for: templates/webpack.config.spec.ts

@@ -22,7 +22,8 @@ const nativeScriptDevWebpack = {
     getEntryModule: () => 'EntryModule',
     getResolver: () => null,
     getEntryPathRegExp: () => null,
-    getConvertedExternals: nsWebpackIndex.getConvertedExternals
+    getConvertedExternals: nsWebpackIndex.getConvertedExternals,
+    getAngularCompilerPlugin: () => AngularCompilerStub
 };
 
 const emptyObject = {};