Unable to make this work
ziacik opened this issue · 4 comments
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
@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.
@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.
@ziacik ok let me know if i can help. You can also find me in the discord of N
@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.