docs: Update extended activity related code

demo/AngularApp/app/activity.android.ts

@@ -2,9 +2,14 @@ import {setActivityCallbacks, AndroidActivityCallbacks} from "ui/frame";
 
 @JavaProxy("org.myApp.MainActivity")
 class Activity extends android.support.v7.app.AppCompatActivity {
+    public isNativeScriptActivity: boolean;
     private _callbacks: AndroidActivityCallbacks;
 
     protected onCreate(savedInstanceState: any): void { // android.os.Bundle
+        // Set isNativeScriptActivity in onCreate (as done in the original NativeScript activity code).
+        // The JS constructor might not be called because the activity is created from Android.
+        this.isNativeScriptActivity = true;
+
         if (!this._callbacks) {
             setActivityCallbacks(this);
         }

demo/AngularApp/tsconfig.tns.json

@@ -0,0 +1,7 @@
+{
+    "extends": "./tsconfig",
+    "compilerOptions": {
+        "module": "es2015",
+        "moduleResolution": "node"
+    }
+}

demo/AngularApp/webpack.config.js

@@ -3,6 +3,7 @@ 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 { nsReplaceBootstrap } = require("nativescript-dev-webpack/transformers/ns-replace-bootstrap");
 const CleanWebpackPlugin = require("clean-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
@@ -15,7 +16,7 @@ module.exports = env => {
     const appComponents = [
         "tns-core-modules/ui/frame",
         "tns-core-modules/ui/frame/activity",
-        resolve(__dirname, "app/activity.android.ts"),
+        resolve(__dirname, "app/activity.android.ts")
     ];
 
     const platform = env && (env.android && "android" || env.ios && "ios");
@@ -42,19 +43,31 @@ module.exports = env => {
         uglify, // --env.uglify
         report, // --env.report
         sourceMap, // --env.sourceMap
+        hmr, // --env.hmr,
     } = env;
+    const externals = (env.externals || []).map((e) => { // --env.externals
+        return new RegExp(e + ".*");
+    });
 
     const appFullPath = resolve(projectRoot, appPath);
     const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
 
-    const entryModule = aot ?
-        nsWebpack.getAotEntryModule(appFullPath) : 
-        `${nsWebpack.getEntryModule(appFullPath)}.ts`;
+    const entryModule = `${nsWebpack.getEntryModule(appFullPath)}.ts`;
     const entryPath = `.${sep}${entryModule}`;
 
+    const ngCompilerPlugin = new AngularCompilerPlugin({
+        hostReplacementPaths: nsWebpack.getResolver([platform, "tns"]),
+        platformTransformers: aot ? [nsReplaceBootstrap(() => ngCompilerPlugin)] : null,
+        mainPath: resolve(appPath, entryModule),
+        tsConfigPath: join(__dirname, "tsconfig.tns.json"),
+        skipCodeGeneration: !aot,
+        sourceMap: !!sourceMap,
+    });
+
     const config = {
         mode: uglify ? "production" : "development",
         context: appFullPath,
+        externals,
         watchOptions: {
             ignored: [
                 appResourcesFullPath,
@@ -109,7 +122,7 @@ module.exports = env => {
                         test: (module, chunks) => {
                             const moduleName = module.nameForCondition ? module.nameForCondition() : '';
                             return /[\\/]node_modules[\\/]/.test(moduleName) ||
-                                    appComponents.some(comp => comp === moduleName);
+                                appComponents.some(comp => comp === moduleName);
                         },
                         enforce: true,
                     },
@@ -118,9 +131,9 @@ module.exports = env => {
             minimize: !!uglify,
             minimizer: [
                 new UglifyJsPlugin({
+                    parallel: true,
+                    cache: true,
                     uglifyOptions: {
-                        parallel: true,
-                        cache: true,
                         output: {
                             comments: false,
                         },
@@ -177,9 +190,9 @@ module.exports = env => {
                 { 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: [
+                    test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
+                    use: [
                         "nativescript-dev-webpack/moduleid-compat-loader",
                         "@ngtools/webpack",
                     ]
@@ -200,7 +213,7 @@ module.exports = env => {
                 "process": undefined,
             }),
             // Remove all files from the out dir.
-            new CleanWebpackPlugin([ `${dist}/**/*` ]),
+            new CleanWebpackPlugin([`${dist}/**/*`]),
             // Copy native app resources to out dir.
             new CopyWebpackPlugin([
                 {
@@ -223,19 +236,13 @@ module.exports = env => {
             // For instructions on how to set up workers with webpack
             // check out https://github.com/nativescript/worker-loader
             new NativeScriptWorkerPlugin(),
-
-            new AngularCompilerPlugin({
-                hostReplacementPaths: nsWebpack.getResolver([platform, "tns"]),
-                entryModule: resolve(appPath, "app.module#AppModule"),
-                tsConfigPath: join(__dirname, "tsconfig.tns.json"),
-                skipCodeGeneration: !aot,
-                sourceMap: !!sourceMap,
-            }),
+            ngCompilerPlugin,
             // 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({
@@ -265,5 +272,9 @@ module.exports = env => {
         }));
     }
 
+    if (hmr) {
+        config.plugins.push(new webpack.HotModuleReplacementPlugin());
+    }
+
     return config;
 };

demo/JavaScriptApp/app/activity.android.js

@@ -3,6 +3,10 @@ const frame = require("ui/frame");
 const superProto = android.support.v7.app.AppCompatActivity.prototype;
 android.support.v7.app.AppCompatActivity.extend("org.myApp.MainActivity", {
     onCreate: function(savedInstanceState) {
+        // Set isNativeScriptActivity in onCreate.
+        // The JS constructor might not be called because the activity is created from Android.
+        this.isNativeScriptActivity = true;
+
         if(!this._callbacks) {
             frame.setActivityCallbacks(this);
         }

demo/JavaScriptApp/webpack.config.js

@@ -41,7 +41,11 @@ module.exports = env => {
         uglify, // --env.uglify
         report, // --env.report
         sourceMap, // --env.sourceMap
+        hmr, // --env.hmr,
     } = env;
+    const externals = (env.externals || []).map((e) => { // --env.externals
+        return new RegExp(e + ".*");
+    });
 
     const appFullPath = resolve(projectRoot, appPath);
     const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
@@ -52,6 +56,7 @@ module.exports = env => {
     const config = {
         mode: uglify ? "production" : "development",
         context: appFullPath,
+        externals,
         watchOptions: {
             ignored: [
                 appResourcesFullPath,
@@ -116,9 +121,9 @@ module.exports = env => {
             minimize: !!uglify,
             minimizer: [
                 new UglifyJsPlugin({
+                    parallel: true,
+                    cache: true,
                     uglifyOptions: {
-                        parallel: true,
-                        cache: true,
                         output: {
                             comments: false,
                         },
@@ -152,6 +157,21 @@ module.exports = env => {
                     ].filter(loader => !!loader)
                 },
 
+                {
+                    test: /-page\.js$/,
+                    use: "nativescript-dev-webpack/script-hot-loader"
+                },
+
+                {
+                    test: /\.(css|scss)$/,
+                    use: "nativescript-dev-webpack/style-hot-loader"
+                },
+
+                {
+                    test: /\.(html|xml)$/,
+                    use: "nativescript-dev-webpack/markup-hot-loader"
+                },
+
                 { test: /\.(html|xml)$/, use: "nativescript-dev-webpack/xml-namespace-loader"},
 
                 {
@@ -165,7 +185,7 @@ module.exports = env => {
                         { loader: "css-loader", options: { minimize: false, url: false } },
                         "sass-loader"
                     ]
-                }
+                },
             ]
         },
         plugins: [
@@ -229,5 +249,10 @@ module.exports = env => {
         }));
     }
 
+    if (hmr) {
+        config.plugins.push(new webpack.HotModuleReplacementPlugin());
+    }
+
+
     return config;
 };

demo/TypeScriptApp/app/activity.android.ts

@@ -2,9 +2,13 @@ import {setActivityCallbacks, AndroidActivityCallbacks} from "ui/frame";
 
 @JavaProxy("org.myApp.MainActivity")
 class Activity extends android.support.v7.app.AppCompatActivity {
+    public isNativeScriptActivity: boolean;
     private _callbacks: AndroidActivityCallbacks;
-
     protected onCreate(savedInstanceState: any): void { // android.os.Bundle
+        // Set isNativeScriptActivity in onCreate (as done in the original NativeScript activity code).
+        // The JS constructor might not be called because the activity is created from Android.
+        this.isNativeScriptActivity = true;
+
         if (!this._callbacks) {
             setActivityCallbacks(this);
         }

demo/TypeScriptApp/app/main-page.android.ts

@@ -4,33 +4,15 @@ a code-behind file. The code-behind is a great place to place your view
 logic, and to set up your page’s data binding.
 */
 
-import { EventData } from 'data/observable';
-import { Page } from 'ui/page';
+import { EventData } from 'tns-core-modules/data/observable';
+import { Page } from 'tns-core-modules/ui/page';
+import { Label } from 'tns-core-modules/ui/label';
+import * as frameModule from 'tns-core-modules/ui/frame';
 import { HelloWorldModel } from './main-view-model';
-import { Label } from 'ui/label';
-import * as frameModule from 'ui/frame';
 
-// Event handler for Page "navigatingTo" event attached in main-page.xml
 export function onNavigatingTo(args: EventData) {
-    /*
-    This gets a reference this page’s <Page> UI component. You can
-    view the API reference of the Page to see what’s available at
-    https://docs.nativescript.org/api-reference/classes/_ui_page_.page.html
-    */
     let page = <Page>args.object;
-
-    /*
-    A page’s bindingContext is an object that should be used to perform
-    data binding between XML markup and TypeScript code. Properties
-    on the bindingContext can be accessed using the {{ }} syntax in XML.
-    In this example, the {{ message }} and {{ onTap }} bindings are resolved
-    against the object returned by createViewModel().
-
-    You can learn more about data binding in NativeScript at
-    https://docs.nativescript.org/core-concepts/data-binding.
-    */
     page.bindingContext = new HelloWorldModel();
-
     page.getViewById<Label>("platform").text = "android";
 }
 

demo/TypeScriptApp/package.json

@@ -38,4 +38,4 @@
     "e2e": "tsc -p e2e && mocha --opts ../config/mocha.opts --recursive e2e --appiumCapsLocation ../config/appium.capabilities.json",
     "compile-tests": "tsc -p e2e --watch"
   }
-}
+}

demo/TypeScriptApp/tsconfig.tns.json

@@ -0,0 +1,7 @@
+{
+    "extends": "./tsconfig",
+    "compilerOptions": {
+        "module": "es2015",
+        "moduleResolution": "node"
+    }
+}

demo/TypeScriptApp/webpack.config.js

@@ -14,7 +14,7 @@ module.exports = env => {
     const appComponents = [
         "tns-core-modules/ui/frame",
         "tns-core-modules/ui/frame/activity",
-        resolve(__dirname, "app/activity.android.ts"),
+        resolve(__dirname, "app/activity.android.ts")
     ];
 
     const platform = env && (env.android && "android" || env.ios && "ios");
@@ -41,7 +41,11 @@ module.exports = env => {
         uglify, // --env.uglify
         report, // --env.report
         sourceMap, // --env.sourceMap
+        hmr, // --env.hmr,
     } = env;
+    const externals = (env.externals || []).map((e) => { // --env.externals
+        return new RegExp(e + ".*");
+    });
 
     const appFullPath = resolve(projectRoot, appPath);
     const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
@@ -52,6 +56,7 @@ module.exports = env => {
     const config = {
         mode: uglify ? "production" : "development",
         context: appFullPath,
+        externals,
         watchOptions: {
             ignored: [
                 appResourcesFullPath,
@@ -62,7 +67,7 @@ module.exports = env => {
         target: nativescriptTarget,
         entry: {
             bundle: entryPath,
-            application: "./application.android",
+            application: "./application.android"
         },
         output: {
             pathinfo: false,
@@ -118,9 +123,9 @@ module.exports = env => {
             minimize: !!uglify,
             minimizer: [
                 new UglifyJsPlugin({
+                    parallel: true,
+                    cache: true,
                     uglifyOptions: {
-                        parallel: true,
-                        cache: true,
                         output: {
                             comments: false,
                         },
@@ -154,6 +159,21 @@ module.exports = env => {
                     ].filter(loader => !!loader)
                 },
 
+                {
+                    test: /-page\.ts$/,
+                    use: "nativescript-dev-webpack/script-hot-loader"
+                },
+
+                {
+                    test: /\.(css|scss)$/,
+                    use: "nativescript-dev-webpack/style-hot-loader"
+                },
+
+                {
+                    test: /\.(html|xml)$/,
+                    use: "nativescript-dev-webpack/markup-hot-loader"
+                },
+
                 { test: /\.(html|xml)$/, use: "nativescript-dev-webpack/xml-namespace-loader"},
 
                 {
@@ -239,5 +259,10 @@ module.exports = env => {
         }));
     }
 
+    if (hmr) {
+        config.plugins.push(new webpack.HotModuleReplacementPlugin());
+    }
+
+
     return config;
 };