search

NativeScript / nativescript-dev-webpack

A package to help with webpacking NativeScript apps.
Apache License 2.0
97 stars 49 forks source link

Nativescript 4.1.0 using custom main activity with webpack #559

Closed tsonevn closed 6 years ago

tsonevn commented 6 years ago

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:

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

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

NickIliev commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago

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

jibon57 commented 6 years ago

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

https://github.com/NativeScript/nativescript-dev-webpack/issues/65#issuecomment-395944406 https://github.com/NativeScript/nativescript-dev-webpack/issues/65#issuecomment-395945488

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

RoyiNamir commented 6 years ago

@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 commented 6 years ago

@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

image

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

image

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 commented 6 years ago

@RadouaneRoufid do you use uglify when bundle?

RadouaneRoufid commented 6 years ago

Yes.

The commad I execute tns run android --env.profile=emulator --env.aot --env.uglify --env.snapshot --bundle --device avd27

RoyiNamir commented 6 years ago

Can u plz try without. Iirc, we also had it and it was related. Also remove snapshot for now. Nick told me before something about it. Wait ill search ...

Edit : found it : see what @NickIliev told me about snapshot. ( also , custom activity POV) https://github.com/NativeScript/nativescript-dev-webpack/issues/446#issuecomment-368510629

RadouaneRoufid commented 6 years ago

You are right. It generates the Java class but I have now an error : 

Please change the name of one of the extended classes.
File:/home/ruser/projects/nativescript/platforms/android/app/src/main/java/org/bricool/MainActivity.java Class: org.bricool.MainActivity
        at org.nativescript.staticbindinggenerator.Generator.writeBindings(Generator.java:78)
        at org.nativescript.staticbindinggenerator.Main.main(Main.java:48)
RoyiNamir commented 6 years ago

@RadouaneRoufid ^ try last comment :) (snapshot thingy in nick comment to me)

RadouaneRoufid commented 6 years ago

I tried with vendor-platform.android.ts. It does not work.

Note that this file should be removed according to latest migration guide.

RadouaneRoufid commented 6 years ago

Sorry, I forgotted an important word in my last comment :).

It does NOT work. the .java file is not generated.

RoyiNamir commented 6 years ago

We updated the project today. - getting the same error 

ERROR in Entry module not found: Error: Can't resolve 'MainActivity' in 'C:\projects-web-storm\digital\dsapp1\app'

using in webpack : 

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

And : 

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

image

declared here :

image

tsconfig package.json

full error : image

@RadouaneRoufid Did you find a solution? @NickIliev we're also facing this issue. If you can't re-make this issue , I have no problem sending the proj via file ( privately).

RadouaneRoufid commented 6 years ago

Replace 

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

by 

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

Do you have an import of MainActivity in you main.aot.ts ?

RoyiNamir commented 6 years ago

@RadouaneRoufid I was looking at Nick's code - hence I was doing it without ./.

Will try now and update.

Regarding the other question :

main.aot.ts

// this import should be first in order to load some required settings (like globals and reflect-metadata)

import { platformNativeScript } from "nativescript-angular/platform-static";

// "./app.module.ngfactory" is a dynamically generated module when compiled with AoT.
import { AppModuleNgFactory } from "./app.module.ngfactory";

platformNativeScript().bootstrapModuleFactory(AppModuleNgFactory);

Worth to mention

After each change I do : 

tns prepare android && tns run android --bundle --env.uglify --env.aot

The update : Now I get only this error :

https://i.imgur.com/9P5jLor.jpg

RoyiNamir commented 6 years ago

@RadouaneRoufid How do you import the activity in the AOT file ?

RadouaneRoufid commented 6 years ago

You don't have to import your activity in main.aot.ts. Your error complains about it in main.aot.ts but I do not see any import of it.

Trytns platform remove android && tns add remove android and rebuild.

RoyiNamir commented 6 years ago

@RadouaneRoufid Did that - Same error : see that it doesn't have slashes : 

ERROR in ./main.aot.ts
Module not found: Error: Can't resolve 'C:projects-web-stormdigitaldsapp1appMainActivity.android.js' in 'C:\projects-web-storm\digital\dsapp1\app'
 @ ./main.aot.ts 5:0-75

image

this is NOt the folder. The folder is : 

c:\projects-web-storm\digital\dsapp1\app\
RadouaneRoufid commented 6 years ago

Can you output the result of resolve(__dirname, "app/MainActivity.android.js") ?

console.log(resolve(__dirname, "app/MainActivity.android.js"));

RoyiNamir commented 6 years ago

@RadouaneRoufid image

C:\projects-web-storm\digital\dsapp1\app\MainActivity.android.js
RadouaneRoufid commented 6 years ago

I have seen a let OnRouteToURL: ReplaySubject<string>; in your previous code, and I think that we are using the same code to navigate to the correct route on app start.

Do you have a require('./MainActivity.android'); in your app.components.ts ?

RoyiNamir commented 6 years ago

@RadouaneRoufid Yeah we use deep links also , But we use it in a service :

image

but please notice no .android postfix : 

  OnRouteToURL = require('../../MainActivity').AndroidOnRouteToURL;

(it used to work like this^ in 3

RadouaneRoufid commented 6 years ago

Very weird your problem with main.aot.ts. Try to locate where you import MainActivity.android outside webpack.config.json

RoyiNamir commented 6 years ago

@RadouaneRoufid Do this OnRouteToURL = require('../../MainActivity.android').AndroidOnRouteToURL;

should be with .android or not ?

RadouaneRoufid commented 6 years ago

it should be without when you bundle.

RoyiNamir commented 6 years ago

@RadouaneRoufid It ^ happens also in a plain test project. reported here. It's weird that you don't get this error. Can you delete all the app folder ( keeping only config and init files) and send only just the config files ( including hooks) project so I will make a comparison ? I can send you a picture which differences. ( beyond compare tool)

RadouaneRoufid commented 6 years ago

What I suggest you is to do this : 1- Delete those dirs : rm -rf node_modules hooks platforms 2- Delete gradle : rm -rf ~/.gradle (to get gradle 4.x) 3- Clear npm cache : npm cache clear -f 4- Install globally node 8.11.x 5- Install your project : npm install 6- ./node_modules/.bin/update-ns-webpack --configs 7- tns platform add android 8- tns build android --bundle --env.aot --env.uglify --env.snapshot

And tell me what you got.

RoyiNamir commented 6 years ago

@RadouaneRoufid Will sure Do. ( when I'm at work). I wonder if @NickIliev 's code compiles (and runs!) with all those flags without error.... Can you plz run Nick's project with aot uglify bundle and see if there's error ?

vchimev commented 6 years ago

Hey @RadouaneRoufid, @RoyiNamir, @jibon57,

could you please remove MainActivity from config's entry and leave only the bundle key as follows:

https://github.com/NickIliev/NS-Issues-2018-II/commit/ef107e15c0cb0f6db5ca385c685816e14e429d2c?diff=unified

RoyiNamir commented 6 years ago

@vchimev So stuff like this : 

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

should be ONLY in appComponents section ?

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

entry: {
            bundle: entryPath
        },

Problem still there after removing MainActivity from config's entry image

Java file is not being generated

vchimev commented 6 years ago

Hey there,

I created this android-extend-ng sample app where I extended Android activity. Also, I added the app/activity.android.ts to appComponents in the webpack.config.js and was able to successfully execute the application with all the commands:

tns run android
tns run android --bundle
tns run android --bundle --env.aot --env.uglify --env.snapshot --release --keyStorePath <keyStorePath> --keyStorePassword <keyStorePassword> --keyStoreAlias <keyStoreAlias> --keyStoreAliasPassword <keyStoreAliasPassword>

Could you please give it a try at your end? If successful, could you please try to git clean -fdx your projects and execute the application with such a configuration?

Thanks, @vchimev

RoyiNamir commented 6 years ago

@vchimev Hi. In Windows - Still No.

I'veDownloaded your project :

image

(npm isntall X2 , tns platform add android)

Running first tns run android --bundle --env.aot --env.uglify

You can see the screen video here : https://i.imgur.com/VJ1M02s.gif

final result :

image

image

If you want to test on my win machine ( ...just say)

RadouaneRoufid commented 6 years ago

I confirm that your project works on a Linux platform. I'm trying to figure out why it does not with mine.

jibon57 commented 6 years ago

That's a known bug. If you have a Linux or Mac then can try. Windows has problem. I haven't tried the solution. Will try in morning

RoyiNamir commented 6 years ago

^windows 10 , nope

jibon57 commented 6 years ago

@RadouaneRoufid , I think new Android directory structure created that conflict with old. Is your project using old Android directory structure? app/App_Resources/android

RoyiNamir commented 6 years ago

@jibon57 I've created a plain new project in a new directory and it still fails. See my response ^. Windows doesn't have a problem . It is with the plugin.

Let's wait for an answer from @vchimev

RadouaneRoufid commented 6 years ago

You are totally right. there is a huge difference between my App_resources and theandroid-extend-ng one

jibon57 commented 6 years ago

@RoyiNamir please check here:

https://github.com/NativeScript/nativescript-dev-webpack/issues/544

RoyiNamir commented 6 years ago

@jibon57 So ? it's not a problem with windows. it's a problem with how it was written to handle directories in windows. Let's wait for an answer.

vchimev commented 6 years ago

Thanks, Guys!

Today we released nativescript-dev-webpack@0.13.0 which contains a fix for paths format on Windows. Could you please update to it and try again?

I would be able to look into this tomorrow morning.

RoyiNamir commented 6 years ago

@vchimev

Still no....

Video Result : https://i.imgur.com/eoQ4m50.gif

image

webpackconfig file ( from your project)

update

@vchimev I took one more shot :

Then I got many errors :

image

Full report : https://pastebin.com/raw/uEguqJ3y

jibon57 commented 6 years ago

@vchimev I have tried but not working from my side too. I did like this:

npm install --save  nativescript-dev-webpack@0.13.0
./node_modules/.bin/update-ns-webpack --deps
./node_modules/.bin/update-ns-webpack --configs

Then in webpack.config.js

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

But I got this error:

ERROR in ./main.ts
Module not found: Error: Can't resolve 'D:OthersDocumentsoneDriveMy_Worksmob_appsmynarsaappMainApplication.android.ts' in 'D:\Others\Documents\oneDrive\My_Works\mob_apps\mynarsa\app'
 @ ./main.ts 5:0-96

Then I have changed like this:

const appComponents = [
        "tns-core-modules/ui/frame",
        "tns-core-modules/ui/frame/activity",
    "../app/MainApplication.android.ts"
];

This time compile was successful like this:

[./ sync ^\.\/app\.(css|scss|less|sass)$] . sync nonrecursive ^\.\/app\.(css|scss|less|sass)$ 160 bytes {bundle} [built]
[./MainApplication.android.ts] 1.41 KiB {bundle} [built]
[./app-routing.module.ts] 798 bytes {bundle} [built]

But when the app was open that time it got crashed:

ActivityManager: Start proc 1816:com.myna.mynarsa/u0a289 for activity com.myna.mynarsa/com.tns.NativeScriptActivity
System.err: com.tns.NativeScriptException: Failed to create JavaScript extend wrapper for class 'com/myna/Application'
System.err:     at com.tns.Runtime.createJSInstanceNative(Native Method)
System.err:     at com.tns.Runtime.createJSInstance(Runtime.java:643)
System.err:     at com.tns.Runtime.initInstance(Runtime.java:618)
System.err:     at com.tns.RuntimeHelper.initRuntime(RuntimeHelper.java:234)
System.err:     at com.myna.Application.onCreate(Application.java:21)
System.err:     at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1024)
System.err:     at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5403)
System.err:     at android.app.ActivityThread.-wrap2(ActivityThread.java)
System.err:     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1545)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:102)
System.err:     at android.os.Looper.loop(Looper.java:154)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:6119)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776)
System.err: java.lang.RuntimeException: Unable to create application com.myna.Application: com.tns.NativeScriptException: JavaScript object for Java ID 0 not found.
System.err: Attempting to call method onCreate
System.err:     at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5406)
System.err:     at android.app.ActivityThread.-wrap2(ActivityThread.java)
System.err:     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1545)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:102)
System.err:     at android.os.Looper.loop(Looper.java:154)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:6119)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776)
System.err: Caused by: com.tns.NativeScriptException: JavaScript object for Java ID 0 not found.
System.err: Attempting to call method onCreate
System.err:     at com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1101)
System.err:     at com.tns.Runtime.callJSMethodImpl(Runtime.java:983)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:970)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:954)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:946)
System.err:     at com.myna.Application.onCreate(Application.java:27)
System.err:     at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1024)
System.err:     at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5403)
System.err:     ... 8 more
ActivityManager: Process com.myna.mynarsa (pid 1816) has died