diff --git a/docs/core-concepts/android-runtime/advanced-topics/extend-application-activity.md b/docs/core-concepts/android-runtime/advanced-topics/extend-application-activity.md index f10c8433e..2ecb93b53 100644 --- a/docs/core-concepts/android-runtime/advanced-topics/extend-application-activity.md +++ b/docs/core-concepts/android-runtime/advanced-topics/extend-application-activity.md @@ -78,14 +78,29 @@ The following steps are needed to create custom native `android.app.Application` >This modification is required by the native platform; it basically tells Android that your custom `Application` class will be used as the main entry point of the application. +4. In order to build the app with [webpack](../../../performance-optimizations/bundling-with-webpack.md), the extended Android application should be added as an [entry](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L71) to the `webpack.config.js` file. + + ```javascript + entry: { + bundle: entryPath, + application: "./application.android", + }, + ``` + + In this way, the source code of [`application.android.ts`](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/app/application.android.ts) is bundled separately as `application.js` file which is loaded from the native `Application.java` class on launch. + + The `bundle.js` and `vendor.js` files are not loaded early enough in the application launch. That's why the logic in `application.android.ts` is needed to be bundled separately in order to be loaded as early as needed in the application lifecycle. + + > Note: This approach won't work if `aplication.android.ts` requires external modules. + ## Extending Activity The core modules ship with a default `android.app.Activity` implementation, which ensures they alone are sufficient to bootstrap an empty NativeScript application, without forcing users to declare their custom `Activity` in every project. When needed, however, users may still specify custom `Activity` implementation and use it to bootstrap the application. The following code demonstrates how this can be done: -1. Create a new JavaScript file in your `app` folder - name it `activity.android.js` +1. Create a new JavaScript file in your `app` folder - name it `activity.android.js` >Note the `*.android` suffix - we want this file packaged for Android only. -2. Declare the extend: +2. Declare the extend: ```javascript const frame = require("ui/frame"); @@ -180,5 +195,17 @@ The core modules ship with a default `android.app.Activity` implementation, whic android:configChanges="keyboardHidden|orientation|screenSize"> ``` +4. In order to build the app with [webpack](../../../performance-optimizations/bundling-with-webpack.md), the absolute path to the file where the Android activity is extended should be added to the [`appComponents`](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L19) array. + + ```javascript + const appComponents = [ + "tns-core-modules/ui/frame", + "tns-core-modules/ui/frame/activity", + resolve(__dirname, "app/activity.android.ts"), + ]; + ``` + + In this way and with the default config, these components [get](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L109-L116) in the common *vendor.js* chunk and are required by the [`android-app-components-loader`](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L146-L149). + ## See Also * [How Extend Works](../generator/extend-class-interface.md) diff --git a/docs/performance-optimizations/bundling-with-webpack.md b/docs/performance-optimizations/bundling-with-webpack.md index b49159b90..9c8ef3e94 100644 --- a/docs/performance-optimizations/bundling-with-webpack.md +++ b/docs/performance-optimizations/bundling-with-webpack.md @@ -209,6 +209,10 @@ function logMessage(message) { } ``` +## Custom Application and Activity + +NativeScript provides a way to create custom `android.app.Application` and `android.app.Activity` implementations. Please, refer to [this](../core-concepts/android-runtime/advanced-topics/extend-application-activity) documentation article for a detail description of how to achieve these as well as how to configure and bundle such a project. + ## Debugging Common Errors Webpack bundling can fail for different reasons. It sometimes fails to resolve certain modules, or it generates code that breaks at runtime. We'll try to cover a few common failure reasons with steps to resolve them in the following sections.