Nativescript 4.1.0 using custom main activity with webpack

[tsonevn]

From @RadouaneRoufid on June 7, 2018 21:11

Did you verify this is a real problem by searching the NativeScript Forum and the other open issues in this repo?

Tell us about the problem

I'm using a custom MainActivity declared as below in my nativescript project in a file named MainActivity.js. I'm importing this file in my vendor-platform.android.ts and declare this activity as my MainActivity in AndroidManifest.xml as <activity android:name="org.bricool.MainActivity"....

I updated recently my project from tns 4.0.0 to tns 4.1.0 and nativescript-dev-webpack from 0.10.1 to 0.12.0. When I start the ns app in dev mode (tns run android). The app works fine, but when I build a release bundled, aoted, uglified and snapshoted, the build succeed but tns does not find the MainActivity on start.

@JavaProxy('org.bricool.MainActivity')
export class Activity extends android.support.v7.app.AppCompatActivity {
...
}

I solved this problem in the previous version of nativescript by doing the following in the webpack.config.js

entry: {
            bundle: aot ?
                `./${nsWebpack.getAotEntryModule(appFullPath)}` :
                `./${nsWebpack.getEntryModule(appFullPath)}`,
            vendor: "./vendor",
            [mainSheet]: `./${mainSheet}`,
            MainActivity: "./MainActivity"
        },

I tried the following with the last version of dev-webpack but it does not work.

entry: {
            bundle: entryPath,
MainActivity: "./MainActivity"
        },

Which platform(s) does your issue occur on?

Android

Please provide the following version numbers that your issue occurs with:

• CLI: 4.1.0
• Cross-platform modules: "tns-core-modules@4.1.0",
• Runtime(s): tns-android 4.1.2
• Plugin(s):
  "dependencies": {
  "@angular/animations": "~5.2.1",
  "@angular/common": "^5.2.1",
  "@angular/compiler": "^5.2.1",
  "@angular/core": "^5.2.1",
  "@angular/forms": "^5.2.1",
  "@angular/http": "^5.2.1",
  "@angular/platform-browser": "^5.2.1",
  "@angular/platform-browser-dynamic": "^5.2.1",
  "@angular/router": "^5.2.1",
  "@ngrx/effects": "^4.1.1",
  "@ngrx/router-store": "^4.1.1",
  "@ngrx/store": "^4.1.1",
  "@ngrx/store-devtools": "^4.1.1",
  "@ngx-progressbar/core": "^3.0.1",
  "@ngx-progressbar/http-client": "^3.0.1",
  "@ngx-translate/core": "^9.1.1",
  "@ngx-translate/http-loader": "^2.0.1",
  "arrive": "^2.3.1",
  "bootstrap": "4.0.0-alpha.6",
  "bootstrap-datepicker": "1.6.4",
  "bootstrap-social": "^5.1.1",
  "core-js": "^2.5.2",
  "font-awesome": "4.7.0",
  "fs": "0.0.1-security",
  "hammerjs": "^2.0.8",
  "i": "^0.3.6",
  "lodash": "^4.17.4",
  "materialize-css": "0.100.2",
  "nativescript-angular": "~5.2.0",
  "nativescript-background-http": "^3.2.7",
  "nativescript-bottom-navigation": "^1.1.2",
  "nativescript-bottombar": "^3.0.8",
  "nativescript-cardview": "^2.0.5",
  "nativescript-checkbox": "^3.0.3",
  "nativescript-floatingactionbutton": "^4.1.3",
  "nativescript-fresco": "^3.0.2",
  "nativescript-imagepicker": "^5.0.0",
  "nativescript-localstorage": "^1.1.5",
  "nativescript-mediafilepicker": "^1.0.5",
  "nativescript-modal-datetimepicker": "^1.1.0",
  "nativescript-ng-shadow": "^2.1.0",
  "nativescript-oauth": "^2.1.2",
  "nativescript-phone": "^1.3.1",
  "nativescript-photoviewer": "^1.4.0",
  "nativescript-snackbar": "^2.0.0",
  "nativescript-theme-core": "~1.0.4",
  "nativescript-ui-listview": "^3.5.7",
  "nativescript-ui-sidedrawer": "^4.1.1",
  "ng2-validation": "^4.2.0",
  "ngrx-store-freeze": "^0.1.9",
  "ngx-pagination": "^3.0.3",
  "node-sass": "^4.9.0",
  "npm": "^4.2.0",
  "osenv": "^0.1.4",
  "path": "^0.12.7",
  "reflect-metadata": "^0.1.12",
  "rxjs": "^5.5.5",
  "tether": "^1.4.3",
  "tns-core-modules": "^4.1.0",
  "url": "^0.11.0",
  "velocity-animate": "^1.5.1",
  "zone.js": "0.8.5"
  },
  "devDependencies": {
  "@angular-devkit/core": "~0.6.3",
  "@angular/compiler-cli": "^5.2.1",
  "@ngtools/webpack": "~6.0.8",
  "@types/googlemaps": "^3.30.8",
  "@types/jasmine": "^2.8.5",
  "babel-traverse": "6.26.0",
  "babel-types": "6.26.0",
  "babylon": "6.18.0",
  "clean-webpack-plugin": "~0.1.19",
  "copy-webpack-plugin": "~4.5.1",
  "css-loader": "~0.28.11",
  "del": "^2.2.2",
  "extract-text-webpack-plugin": "~3.0.2",
  "fs-walk": "0.0.2",
  "gulp": "^4.0.0",
  "gulp-debug": "^3.1.0",
  "gulp-exec": "^3.0.1",
  "gulp-if": "^2.0.2",
  "gulp-rename": "^1.2.2",
  "gulp-spawn": "^0.4.0",
  "gulp-string-replace": "^0.4.0",
  "lazy": "1.0.11",
  "mkdirp": "^0.5.1",
  "nativescript-css-loader": "~0.26.1",
  "nativescript-dev-android-snapshot": "^0.0.11",
  "nativescript-dev-sass": "^1.6.0",
  "nativescript-dev-typescript": "~0.7.0",
  "nativescript-dev-webpack": "^0.12.0",
  "nativescript-worker-loader": "~0.9.0",
  "raw-loader": "~0.5.1",
  "resolve-url-loader": "~2.3.0",
  "run-sequence": "^2.2.1",
  "sass-loader": "~6.0.6",
  "tns-platform-declarations": "^4.1.0",
  "typescript": "~2.7.2",
  "typescript-register": "^1.1.0",
  "uglifyjs-webpack-plugin": "~1.2.5",
  "webpack": "~4.6.0",
  "webpack-bundle-analyzer": "^2.13.1",
  "webpack-sources": "~1.1.0",
  "webpack-cli": "~2.1.3"
  },

Please tell us how to recreate the issue in as much detail as possible.

1- Create a new ns project
2- Create a custom MainActivity
3- build the app with : tns build android --env.profile=mprod --bundle --env.aot --env.uglify --env.snapshot

Copied from original issue: NativeScript/NativeScript#5928

[tsonevn]

From @RadouaneRoufid on June 7, 2018 21:26

I also tried to add the activity in the appComponents of webpack.config.js

    const appComponents = [
        "tns-core-modules/ui/frame",
        "tns-core-modules/ui/frame/activity",
        resolve(__dirname, "app/MainActivity.ts"),
    ];

but same problem.

[NickIliev]

There are some changes in nativescript-dev-webpack as described in this migration blog post.

Apart from setting the MainActivity key, the custom activity should be added to `appComponents in webpack.config.js
For example:

    const appComponents = [
        "tns-core-modules/ui/frame",
        "tns-core-modules/ui/frame/activity",
        resolve(__dirname, "app/MainActivity.android.ts")
    ];

Where the extended activity file is in app folder

[RadouaneRoufid]

As I mentionned, I also tried the following:

const appComponents = [
    "tns-core-modules/ui/frame",
    "tns-core-modules/ui/frame/activity",
    resolve(__dirname, "app/MainActivity.android.ts")
];

and I even tested with multiple variant
resolve(__dirname, "app/MainActivity.android.ts")
resolve(__dirname, "app/MainActivity.android")
resolve(__dirname, "app/MainActivity")
resolve("app/MainActivity.android.ts")

but still get the error.

[NickIliev]

@RadouaneRoufid I've just noticed that you have tried this approach. I will create a test application and post it here with the results.

[RadouaneRoufid]

Thank you NickIliev. I updated my previous comment by adding the different approach I tested.

[NickIliev]

@RadouaneRoufid I've used this project for testing purposes, and the webpack bundle was successful at my side.

The changes in webpack.config. file is here and here.
This is the extended activity used in the application and here the activity is added in AndoridManifest.xml.

Let me know if the project is building on your side - you can also use it as a reference.
NOte: You might want to update your Angular related dependencies

[RadouaneRoufid]

I cloned your project, and I have the same error

Built at: 2018-06-08 12:16:15
 2 assets
  [2] ../node_modules/@angular/router/fesm5/router.js + 14 modules 338 KiB {0} [built]
      |    15 modules
  [4] ../node_modules/rxjs/_esm5/internal/Observable.js + 1 modules 13.2 KiB {0} [built]
      |    2 modules
  [6] ../node_modules/rxjs/_esm5/internal/observable/of.js + 1 modules 1.17 KiB {0} [built]
      |    2 modules
 [12] ../node_modules/rxjs/_esm5/internal/Subscription.js + 2 modules 8.64 KiB {0} [built]
      |    3 modules
 [13] ../node_modules/rxjs/_esm5/internal/observable/from.js + 5 modules 6.33 KiB {0} [built]
      |    6 modules
 [50] ../node_modules/rxjs/_esm5/internal/util/subscribeToResult.js + 1 modules 1.56 KiB {0} [built]
      |    2 modules
[130] ../$$_lazy_route_resource lazy namespace object 160 bytes {1} [built]
[159] ./package.json 135 bytes {1} [optional] [built]
[166] ./app.module.ngfactory.js + 9 modules 17.7 KiB {1} [built]
      | ./app.module.ngfactory.js 6.71 KiB [built]
      | ./app.module.ts 426 bytes [built]
      | ./app.component.ts 140 bytes [built]
      | ./item/item.service.ts 1.43 KiB [built]
      | ./item/items.component.ts 660 bytes [built]
      | ./item/items.component.ngfactory.js 3.15 KiB [built]
      | ./item/item-detail.component.ts 558 bytes [built]
      | ./item/item-detail.component.ngfactory.js 2.46 KiB [built]
      | ./app.component.ngfactory.js 1.65 KiB [built]
      | ./app.routing.ts 466 bytes [built]
[181] ../node_modules/rxjs/_esm5/index.js + 44 modules 154 KiB {0} [built]
      |    45 modules
[212] ./app.css 746 bytes {1} [optional] [built]
[213] . sync nonrecursive ^\.\/app\.(css|scss|less|sass)$ 174 bytes {1} [built]
[215] ./MainActivity.android.js 2.56 KiB {0} [built]
[247] ./main.aot.ts 791 bytes {1} [built]
[248] ../node_modules/rxjs/_esm5/internal/operators/share.js + 1 modules 3.59 KiB {0} [built]
      |    2 modules
    + 318 hidden modules

ERROR in Entry module not found: Error: Can't resolve 'MainActivity' in '/home/me/mainact/NS-Issues-2018-II/nativescript-dev-webpack/extendActivity/app'

I'm using tns--version 4.1.0 and node 8.11.2. is it same as you ?

[RadouaneRoufid]

I'm still struggling with this with no solution !! Any idea to make it work ? or workaround it ?

[jibon57]

Oh! I was about to open another issue. I am facing same problem & I have written it here too:

#65 (comment)
#65 (comment)

@tsonevn @NickIliev Please try to extend both Application & Activity in fresh project. It will always give error.

[RoyiNamir]

@RadouaneRoufid Can you try resolve(__dirname, "app/MainActivity") instead ?
We also ( in 4.0 , not 4.1) used

 entry: {
            bundle: aot ? "./main.aot.ts" : "./main.ts",
            vendor: "./vendor",
            MainActivity: "./appcompat-activity",
            MainIosActivity: "./delegate",
            DocumentPacker: "./core/models/core/documentPickerDelegate.model"
        },

as you notice , no ts , no android

[RadouaneRoufid]

@RoyiNamir I already tried your solution. The MainActivity is correctly recognized and picked up. I verified that in the console output and by generating a report.

with a -- bundle option, the build succeed without console errors. But when starting the app on device or emulator, the classNotFoundExcetion occurs. I tried to understand why it does not work and I realized the java class of the @JavaProxy is not generated as you can see below

while without --bundle option, a MainActivity.java exists under org.bricool as below :

So my mission now is to understand why and locate the code responsible for that generation.

@NickIliev I really appreciate if you can tell us what plugin or code is reponsible for generating the java class ?

[RoyiNamir]

@RadouaneRoufid do you use uglify when bundle?