Skip to content
This repository was archived by the owner on Nov 17, 2022. It is now read-only.

docs(webpack): add custom application and activity section #1254

Merged
merged 4 commits into from
Jul 17, 2018
Merged
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions docs/performance-optimizations/bundling-with-webpack.md
Original file line number Diff line number Diff line change
Expand Up @@ -209,6 +209,41 @@ function logMessage(message) {
}
```

## Custom Application and Activity

NativeScript provides a way to create custom `android.app.Application` and `android.app.Activity` implementations described in [this](https://docs.nativescript.org/core-concepts/android-runtime/advanced-topics/extend-application-activity) documentation article. In order to bundle such an application, it needs to be configured.

### Extend Android Application

If your project extends an Android application, it 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.

```
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 `application.js` bundle file is independent of the `bundle.js` and `vendor.js` files and the reason for this is that they are not loaded so early in the application launch. That's why the logic in `application.android.ts` is needed to be bundled separately in order to be loaded by the native `Application.java` as early as needed on launch.

> Note: This approach won't work if `aplication.android.ts` requires external modules.

### Extend Android Activity

If your project extends an Android activity, it should be added to the [`appComponents`](https://github.com/NativeScript/nativescript-dev-webpack/blob/master/demo/AngularApp/webpack.config.js#L19) array by an absolute path.

```
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).

## 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.
Expand Down