Unable to make this work

ziacik commented 1 year ago

Make sure to check the demo app(s) for sample usage

I've tried the demo-ng. I wasn't able to get it work. Cloned this repo, did yarn, did npm run build.all (no error), then npm run demo.ng.android, got 22 compilation errors, such as: ERROR in ../demo-snippets/ng/tabs/tabs.component.ts:8:14 - error NG6007: The Component 'TabsComponent' is declared by more than one NgModule.

or even SassError: Undefined variable. ╷ 2 │ font-family: $mdi-fontFamily;

Is it just not working, is it outdated, or am I doing something wrong? Maybe the README should be updated. I'd expect the demos to just work.

If the demo apps cannot help and there is no issue for your problem, tell us about it

So i wanted to use a component in my own app. The app is a nx workspace generated via nativescript-nx plugin. Installed using tns plugin add @nativescript-community/ui-material-textfield Imported the module and used in html.

After start, I got TypeError: Cannot read property 'material' of undefined.

 System.err: An uncaught Exception occurred on "main" thread.
  System.err: Unable to resume activity {org.nativescript.amelieao3/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: Calling js method onCreateView failed
  System.err: TypeError: Cannot read property 'material' of undefined
  System.err:
  System.err: StackTrace:
  System.err: java.lang.RuntimeException: Unable to resume activity {org.nativescript.amelieao3/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: Calling js method onCreateView failed
  System.err: TypeError: Cannot read property 'material' of undefined
  System.err:   at android.app.ActivityThread.performResumeActivity(ActivityThread.java:4898)
  System.err:   at android.app.ActivityThread.handleResumeActivity(ActivityThread.java:4931)
  System.err:   at android.app.servertransaction.ResumeActivityItem.execute(ResumeActivityItem.java:54)
  System.err:   at android.app.servertransaction.ActivityTransactionItem.execute(ActivityTransactionItem.java:45)
  System.err:   at android.app.servertransaction.TransactionExecutor.executeLifecycleState(TransactionExecutor.java:176)
  System.err:   at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:97)
  System.err:   at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2311)
  System.err:   at android.os.Handler.dispatchMessage(Handler.java:111)
  System.err:   at android.os.Looper.loopOnce(Looper.java:238)
  System.err:   at android.os.Looper.loop(Looper.java:357)
  System.err:   at android.app.ActivityThread.main(ActivityThread.java:8098)
  System.err:   at java.lang.reflect.Method.invoke(Native Method)
  System.err:   at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:548)
  System.err:   at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1026)
  System.err: Caused by: com.tns.NativeScriptException: Calling js method onCreateView failed
  System.err: TypeError: Cannot read property 'material' of undefined
  System.err:   at com.tns.Runtime.callJSMethodNative(Native Method)
  System.err:   at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1302)
  System.err:   at com.tns.Runtime.callJSMethodImpl(Runtime.java:1188)
  System.err:   at com.tns.Runtime.callJSMethod(Runtime.java:1175)
  System.err:   at com.tns.Runtime.callJSMethod(Runtime.java:1153)
  System.err:   at com.tns.Runtime.callJSMethod(Runtime.java:1149)
  System.err:   at com.tns.FragmentClass.onCreateView(FragmentClass.java:55)
  System.err:   at androidx.fragment.app.Fragment.performCreateView(Fragment.java:3104)
  System.err:   at androidx.fragment.app.FragmentStateManager.createView(FragmentStateManager.java:524)
  System.err:   at androidx.fragment.app.FragmentStateManager.moveToExpectedState(FragmentStateManager.java:261)
  System.err:   at androidx.fragment.app.FragmentManager.executeOpsTogether(FragmentManager.java:1899)
  System.err:   at androidx.fragment.app.FragmentManager.removeRedundantOperationsAndExecute(FragmentManager.java:1817)
  System.err:   at androidx.fragment.app.FragmentManager.execPendingActions(FragmentManager.java:1760)
  System.err:   at androidx.fragment.app.FragmentController.execPendingActions(FragmentController.java:495)
  System.err:   at androidx.fragment.app.FragmentActivity.onResume(FragmentActivity.java:312)
  System.err:   at android.app.Instrumentation.callActivityOnResume(Instrumentation.java:1478)
  System.err:   at android.app.Activity.performResume(Activity.java:8386)
  System.err:   at android.app.ActivityThread.performResumeActivity(ActivityThread.java:4888)
  System.err:   ... 13 more

Again - did I misconfigure something? If so, should be mentioned in the README.

Which platform(s) does your issue occur on?

Tried on Android.

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

CLI: 8.4.0
Cross-platform modules: 8.4.7
Runtime(s): ???

Plugin(s):

"devDependencies": {
    "@angular-devkit/build-angular": "^15.0.0",
    "@angular/cli": "^15.1.6",
    "@angular/compiler-cli": "^15.0.0",
    "@nativescript/nx": "^4.2.0",
    "@nativescript/types": "~8.4.0",
    "@nativescript/webpack": "~5.0.0",
    "@ngtools/webpack": "^15.0.0",
    "@nrwl/eslint-plugin-nx": "15.8.5",
    "@nrwl/jest": "15.8.5",
    "@nrwl/linter": "15.8.5",
    "@nrwl/nx-cloud": "15.2.1",
    "@nrwl/workspace": "15.8.5",
    "@types/jest": "29.4.0",
    "@types/node": "16.11.7",
    "@typescript-eslint/eslint-plugin": "^5.52.0",
    "@typescript-eslint/parser": "^5.52.0",
    "core-js": "^3.29.0",
    "eslint": "~8.15.0",
    "eslint-config-prettier": "^8.1.0",
    "jest": "29.4.3",
    "jest-environment-jsdom": "29.4.3",
    "jest-preset-angular": "^13.0.0",
    "nx": "15.8.5",
    "prettier": "^2.6.2",
    "sass": "^1.32.0",
    "ts-jest": "29.0.5",
    "ts-node": "10.9.1",
    "typescript": "4.9.5"
},
"dependencies": {
    "@angular/animations": "^15.0.0",
    "@angular/common": "^15.0.0",
    "@angular/compiler": "^15.0.0",
    "@angular/core": "^15.0.0",
    "@angular/forms": "^15.0.0",
    "@angular/platform-browser": "^15.0.0",
    "@angular/platform-browser-dynamic": "^15.0.0",
    "@angular/router": "^15.0.0",
    "@nativescript-community/ui-material-textview": "^7.0.42",
    "@nativescript/angular": "^15.0.0",
    "@nativescript/core": "~8.4.0",
    "@nativescript/theme": "^3.0.2",
    "cheerio": "^1.0.0-rc.12",
    "rxjs": "~7.6.0",
    "tslib": "^2.3.0",
    "zone.js": "^0.12.0"
},

Is there any code involved?

git clone https://github.com/ziacik/amelie-ao3.git cd amelie-ao3 && git checkout ui-material npm i npx nx android

farfromrefug commented 1 year ago

@ziacik sorry about the demo app. Tbh I haven't touched the angular demo for a while.

Now about your error in your app it seems to say it can't find the native android lib. I dont use nx so I can't tell. Can you try with in a template angular app? Again I am sorry I dont use angular but I know for certain other people are using it with angular.

ziacik commented 1 year ago

@farfromrefug Thanks for the quick response. I tried this with nativescript original angular template, and it seems to work (altough at first I had an error saying I must set Material theme to styles.xml, so I did). So I guess I must figure out the differences with nx template. Thanks, closing.

farfromrefug commented 1 year ago

@ziacik ok let me know if i can help. You can also find me in the discord of N

ziacik commented 1 year ago

@farfromrefug Thanks. Can't use discord because the group seems to require a phone verification which I don't want.

Anyway, I figured this out, so if anyone got into this, here's the solution:

When using nx with the NS plugin, there are two package.json-s generated, one in the root and another in the nativescript-*** app. In the second one, the reference to material ui component needs to be added too under dependencies, with * as version (the same way as @nativescript/core). Then the platform stuff is generated correctly at build and everything works.

nativescript-community / ui-material-components