fix: resolve appComponents and xml namespaces absolute paths on Windo…

…ws (#578)

* fix: resolve appComponents absolute paths on Windows

Fix #573.

* fix: resolve xml namespaces absolute paths on Windows

* chore(JavaScriptApp): add webpack.config.js file

Clean up npm scripts.

* test(JavaScriptApp): extend android application

* test(JavaScriptApp): extend android activity

* chore(TypeScriptApp): add webpack.config.js file

Clean up npm scripts.

* chore(TypeScriptApp): add platform declarations

* test(TypeScriptApp): extend android application

* test(TypeScriptApp): extend android activity

* chore(AngularApp): add webpack.config.js file

Clean up npm scripts.

* chore(AngularApp): add platform declarations

* test(AngularApp): extend android application

* test(AngularApp): extend android activity

* chore(AngularApp): update @angular/compiler-cli version

* refactor(demos): minor tweaks

* chore(JavaScript): remove unused variables

* refactor: address comments

* chore(e2e): update application activity to launch

* refactor: remove tns-platform-declarations dependency

* chore(e2e): remove application activity from capabilities

The nativescript-dev-appium plugin gets it automatically, no need to declare it in the `appium.capabilities.json` file.

android-app-components-loader.js

@@ -1,7 +1,10 @@
-module.exports = function(source) {
+const { convertSlashesInPath } = require("./projectHelpers");
+
+module.exports = function (source) {
     this.cacheable();
     const { modules } = this.query;
-    const imports = modules.map(m => `require("${m}");`).join("\n");
+    const imports = modules.map(convertSlashesInPath)
+        .map(m => `require("${m}");`).join("\n");
     const augmentedSource = `
         if (!global["__snapshot"]) {
             ${imports}

demo/.gitignore

@@ -16,4 +16,4 @@ tsconfig.aot.json
 vendor.js
 vendor.ts
 
-webpack.config.js
+tsconfig.esm.json

demo/AngularApp/app/App_Resources/Android/AndroidManifest.xml

@@ -19,14 +19,14 @@
 	<uses-permission android:name="android.permission.INTERNET"/>
 
 	<application
-		android:name="com.tns.NativeScriptApplication"
+		android:name="org.myApp.Application"
 		android:allowBackup="true"
 		android:icon="@drawable/icon"
 		android:label="@string/app_name"
 		android:theme="@style/AppTheme">
 
 		<activity
-			android:name="com.tns.NativeScriptActivity"
+			android:name="org.myApp.MainActivity"
 			android:label="@string/title_activity_kimera"
 			android:configChanges="keyboardHidden|orientation|screenSize"
 			android:theme="@style/LaunchScreenTheme">

demo/AngularApp/app/activity.android.ts

@@ -0,0 +1,42 @@
+import {setActivityCallbacks, AndroidActivityCallbacks} from "ui/frame";
+
+@JavaProxy("org.myApp.MainActivity")
+class Activity extends android.app.Activity {
+    private _callbacks: AndroidActivityCallbacks;
+
+    protected onCreate(savedInstanceState: any): void { // android.os.Bundle
+        if (!this._callbacks) {
+            setActivityCallbacks(this);
+        }
+
+        this._callbacks.onCreate(this, savedInstanceState, super.onCreate);
+    }
+
+    protected onSaveInstanceState(outState: any): void { // android.os.Bundle
+        this._callbacks.onSaveInstanceState(this, outState, super.onSaveInstanceState);
+    }
+
+    protected onStart(): void {
+        this._callbacks.onStart(this, super.onStart);
+    }
+
+    protected onStop(): void {
+        this._callbacks.onStop(this, super.onStop);
+    }
+
+    protected onDestroy(): void {
+        this._callbacks.onDestroy(this, super.onDestroy);
+    }
+
+    public onBackPressed(): void {
+        this._callbacks.onBackPressed(this, super.onBackPressed);
+    }
+
+    public onRequestPermissionsResult(requestCode: number, permissions: Array<String>, grantResults: Array<number>): void {
+        this._callbacks.onRequestPermissionsResult(this, requestCode, permissions, grantResults, undefined /*TODO: Enable if needed*/);
+    }
+
+    protected onActivityResult(requestCode: number, resultCode: number, data: any): void { // android.content.Intent
+        this._callbacks.onActivityResult(this, requestCode, resultCode, data, super.onActivityResult);
+    }
+}

demo/AngularApp/app/application.android.ts

@@ -0,0 +1,10 @@
+@JavaProxy("org.myApp.Application")
+class Application extends android.app.Application {
+    onCreate(): void {
+        super.onCreate();
+    }
+
+    protected attachBaseContext(baseContext: any) { // android.content.Context
+        super.attachBaseContext(baseContext);
+    }
+}

demo/AngularApp/app/application.d.ts

@@ -0,0 +1 @@
+declare const android: any;

demo/AngularApp/package.json

@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.7.0-beta.1",
-    "@angular/compiler-cli": "~6.0.0",
+    "@angular/compiler-cli": "~6.1.0-beta.1",
     "@types/chai": "^4.0.2",
     "@types/mocha": "^2.2.41",
     "@types/node": "^7.0.5",
@@ -50,13 +50,6 @@
     "typescript": "~2.7.2"
   },
   "scripts": {
-    "ns-bundle": "ns-bundle",
-    "start-android-bundle": "npm run ns-bundle --android --run-app",
-    "start-ios-bundle": "npm run ns-bundle --ios --run-app",
-    "build-android-bundle": "npm run ns-bundle --android --build-app",
-    "build-ios-bundle": "npm run ns-bundle --ios --build-app",
-    "publish-ios-bundle": "npm run ns-bundle --ios --publish-app",
-    "generate-android-snapshot": "generate-android-snapshot --targetArchs arm,arm64,ia32 --install",
     "e2e": "tsc -p e2e && mocha --opts ../config/mocha.opts --recursive e2e --appiumCapsLocation ../config/appium.capabilities.json",
     "compile-tests": "tsc -p e2e --watch"
   }

demo/AngularApp/webpack.config.js

@@ -0,0 +1,270 @@
+const { join, relative, resolve, sep } = require("path");
+
+const webpack = require("webpack");
+const nsWebpack = require("nativescript-dev-webpack");
+const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
+const { PlatformReplacementHost } = require("nativescript-dev-webpack/host/platform");
+const CleanWebpackPlugin = require("clean-webpack-plugin");
+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");
+
+module.exports = env => {
+    // Add your custom Activities, Services and other Android app components here.
+    const appComponents = [
+        "tns-core-modules/ui/frame",
+        "tns-core-modules/ui/frame/activity",
+        resolve(__dirname, "app/activity.android.ts"),
+    ];
+
+    const platform = env && (env.android && "android" || env.ios && "ios");
+    if (!platform) {
+        throw new Error("You need to provide a target platform!");
+    }
+
+    const extensions = ["tns", platform];
+    const platformHost = new PlatformReplacementHost(extensions);
+
+    const projectRoot = __dirname;
+
+    // Default destination inside platforms/<platform>/...
+    const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
+    const appResourcesPlatformDir = platform === "android" ? "Android" : "iOS";
+
+    const {
+        // 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",
+
+        // You can provide the following flags when running 'tns run android|ios'
+        aot, // --env.aot
+        snapshot, // --env.snapshot
+        uglify, // --env.uglify
+        report, // --env.report
+    } = env;
+
+    const appFullPath = resolve(projectRoot, appPath);
+    const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
+
+    const entryModule = aot ?
+        nsWebpack.getAotEntryModule(appFullPath) : 
+        `${nsWebpack.getEntryModule(appFullPath)}.ts`;
+    const entryPath = `.${sep}${entryModule}`;
+
+    const config = {
+        mode: uglify ? "production" : "development",
+        context: appFullPath,
+        watchOptions: {
+            ignored: [
+                appResourcesFullPath,
+                // Don't watch hidden files
+                "**/.*",
+            ]
+        },
+        target: nativescriptTarget,
+        entry: {
+            bundle: entryPath,
+            application: "./application.android",
+        },
+        output: {
+            pathinfo: false,
+            path: dist,
+            libraryTarget: "commonjs2",
+            filename: "[name].js",
+            globalObject: "global",
+        },
+        resolve: {
+            extensions: [".ts", ".js", ".scss", ".css"],
+            // Resolve {N} system modules from tns-core-modules
+            modules: [
+                resolve(__dirname, "node_modules/tns-core-modules"),
+                resolve(__dirname, "node_modules"),
+                "node_modules/tns-core-modules",
+                "node_modules",
+            ],
+            alias: {
+                '~': appFullPath
+            },
+            symlinks: true
+        },
+        resolveLoader: {
+            symlinks: false
+        },
+        node: {
+            // Disable node shims that conflict with NativeScript
+            "http": false,
+            "timers": false,
+            "setImmediate": false,
+            "fs": "empty",
+            "__dirname": false,
+        },
+        devtool: "none",
+        optimization: {
+            splitChunks: {
+                cacheGroups: {
+                    vendor: {
+                        name: "vendor",
+                        chunks: "all",
+                        test: (module, chunks) => {
+                            const moduleName = module.nameForCondition ? module.nameForCondition() : '';
+                            return /[\\/]node_modules[\\/]/.test(moduleName) ||
+                                    appComponents.some(comp => comp === moduleName);
+                        },
+                        enforce: true,
+                    },
+                }
+            },
+            minimize: !!uglify,
+            minimizer: [
+                new UglifyJsPlugin({
+                    uglifyOptions: {
+                        parallel: true,
+                        cache: true,
+                        output: {
+                            comments: false,
+                        },
+                        compress: {
+                            // The Android SBG has problems parsing the output
+                            // when these options are enabled
+                            'collapse_vars': platform !== "android",
+                            sequences: platform !== "android",
+                        }
+                    }
+                })
+            ],
+        },
+        module: {
+            rules: [
+                {
+                    test: new RegExp(entryPath),
+                    use: [
+                        // Require all Android app components
+                        platform === "android" && {
+                            loader: "nativescript-dev-webpack/android-app-components-loader",
+                            options: { modules: appComponents }
+                        },
+
+                        {
+                            loader: "nativescript-dev-webpack/bundle-config-loader",
+                            options: {
+                                angular: true,
+                                loadCss: !snapshot, // load the application css if in debug mode
+                            }
+                        },
+                    ].filter(loader => !!loader)
+                },
+
+                { test: /\.html$|\.xml$/, use: "raw-loader" },
+
+                // tns-core-modules reads the app.css and its imports using css-loader
+                {
+                    test: /[\/|\\]app\.css$/,
+                    use: {
+                        loader: "css-loader",
+                        options: { minimize: false, url: false },
+                    }
+                },
+                {
+                    test: /[\/|\\]app\.scss$/,
+                    use: [
+                        { loader: "css-loader", options: { minimize: false, url: false } },
+                        "sass-loader"
+                    ]
+                },
+
+                // Angular components reference css files and their imports using raw-loader
+                { test: /\.css$/, exclude: /[\/|\\]app\.css$/, use: "raw-loader" },
+                { test: /\.scss$/, exclude: /[\/|\\]app\.scss$/, use: ["raw-loader", "resolve-url-loader", "sass-loader"] },
+
+                // Compile TypeScript files with ahead-of-time compiler.
+                {
+                    test: /.ts$/, use: [
+                        "nativescript-dev-webpack/moduleid-compat-loader",
+                        "@ngtools/webpack",
+                    ]
+                },
+
+                // Mark files inside `@angular/core` as using SystemJS style dynamic imports.
+                // Removing this will cause deprecation warnings to appear.
+                {
+                    test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
+                    parser: { system: true },
+                },
+            ],
+        },
+        plugins: [
+            // Define useful constants like TNS_WEBPACK
+            new webpack.DefinePlugin({
+                "global.TNS_WEBPACK": "true",
+            }),
+            // Remove all files from the out dir.
+            new CleanWebpackPlugin([ `${dist}/**/*` ]),
+            // Copy native app resources to out dir.
+            new CopyWebpackPlugin([
+                {
+                    from: `${appResourcesFullPath}/${appResourcesPlatformDir}`,
+                    to: `${dist}/App_Resources/${appResourcesPlatformDir}`,
+                    context: projectRoot
+                },
+            ]),
+            // Copy assets to out dir. Add your own globs as needed.
+            new CopyWebpackPlugin([
+                { from: "fonts/**" },
+                { from: "**/*.jpg" },
+                { from: "**/*.png" },
+            ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
+            // Generate a bundle starter script and activate it in package.json
+            new nsWebpack.GenerateBundleStarterPlugin([
+                "./vendor",
+                "./bundle",
+            ]),
+            // For instructions on how to set up workers with webpack
+            // check out https://github.com/nativescript/worker-loader
+            new NativeScriptWorkerPlugin(),
+
+            new AngularCompilerPlugin({
+                host: platformHost,
+                entryModule: resolve(appPath, "app.module#AppModule"),
+                tsConfigPath: join(__dirname, "tsconfig.esm.json"),
+                skipCodeGeneration: !aot,
+            }),
+            // Does IPC communication with the {N} CLI to notify events when running in watch mode.
+            new nsWebpack.WatchStateLoggerPlugin(),
+        ],
+    };
+
+    if (report) {
+        // Generate report files for bundles content
+        config.plugins.push(new BundleAnalyzerPlugin({
+            analyzerMode: "static",
+            openAnalyzer: false,
+            generateStatsFile: true,
+            reportFilename: resolve(projectRoot, "report", `report.html`),
+            statsFilename: resolve(projectRoot, "report", `stats.json`),
+        }));
+    }
+
+    if (snapshot) {
+        config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({
+            chunk: "vendor",
+            angular: true,
+            requireModules: [
+                "reflect-metadata",
+                "@angular/platform-browser",
+                "@angular/core",
+                "@angular/common",
+                "@angular/router",
+                "nativescript-angular/platform-static",
+                "nativescript-angular/router",
+            ],
+            projectRoot,
+            webpackConfig: config,
+        }));
+    }
+
+    return config;
+};