Runtime Error.. ..Nativescript 2.4.2, Typescript 2.1.4 about nativescript-floatingactionbutton

[holymp2006]

Ok, I think I see the problem.
You never said anything about installing as a nativescript plugin.
I installed as an npm package like the instruction says npm install nativescript-floatingactionbutton

tns install installs other dependencies too, in this case;
"Installing MNFloatingActionButton (0.1.5)”

I installed as nativescript plugin,
tns plugin add nativescript-floatingactionbutton

...and everything works fine.
Thanks for the plugin, Brad. :)

[bradmartin]

Yep. Almost any plugin that is plain NATIVESCRIPT works with Angular. Make sure you run a full build after adding plugins with native deps and if using angular you'll need to use registerElement() like you mentioned.

[holymp2006]

thanks for the quick reply, Brad. I already did multiple full builds before reporting this. I'm not using angular. my project is just Typescript (that gets "compiled" to js). I don't know if I'm right, but I think a ".d.ts" file which contains the module declaration might be needed in the plugin folder. This is obtainable for other plugins I already use.

[bradmartin]

Not a requirement. Those are definition/declarations for typescript. I use it all the time. Most of my plugin repos have them. This was the first plugin I did and was in plain js. So having the .d.ts file will help but that's not the issue for anything failing and some IDEs resolve modules better than others. At any rate. I'm fairly certain I have this working with the latest NativeScript version since typescript wouldn't be involved with this plugin at any point. Also if a plugin is in typescript it should really only ship the transpiled .js to npm since TS isnt being ran through anything.

Sorry for the long message. Have you added the xmlns to the page component in your UI?

[holymp2006]

message wasn't long, I read everything. :) ..yes, I added the xmlns to page like you described in usage.
Just to be sure, below is the xml for the page.

<Page loaded="pageLoaded" 
    xmlns="http://schemas.nativescript.org/tns.xsd" 
    xmlns:FAB="nativescript-floatingactionbutton">
    <Page.actionBar>
        <ActionBar title="  "/>
    </Page.actionBar>
    <StackLayout orientation="vertical">
        <GridLayout>
            <GridLayout scaleX="1" scaleY="1" class="background"></GridLayout>
            <GridLayout scaleX="1" scaleY="1" class="background-overlay"></GridLayout>
            <GridLayout class="container" rows="70,auto,auto,*,20">
                <StackLayout row="1">
                    <TextField text="{{ verifyInput }}" id="verifyTextField" hint="xxxxxxx" autocorrect="false" autocapitalizationType="allCharacters" returnPress="verify" returnKeyType="go" />
                    <Button text="Verify" tap="verify" class="btn-primary btn-verify" />
                </StackLayout>
                <StackLayout row="2" verticalAlignment="bottom">
                    <Button text="+" tap="{{ gotoRegister }}" class="register-shortcut" horizontalAlignment="right" /> 
                </StackLayout>
                <StackLayout row="3" verticalAlignment="bottom">
                    <FAB:fab tap="{{ gotoRegister }}"
                     row="1"
                     icon="res://my_icon"
                     rippleColor="#f1f1f1"
                     class="fab-button" />
                </StackLayout>
            </GridLayout>
            <ActivityIndicator busy="{{ isLoading }}" />
        </GridLayout>
    </StackLayout>
</Page>

In the code, the Button just above your FAB, is what I currently use as my FAB. But I couldn't get the border radius to be perfect, so I need yours to work and save me. :)
I have fully built again, but the problem is still there.

[bradmartin]

Yea that's all good. Do me a favor. Create a new app using the CLI. Add the plugin, change the XML in the template app to the XML on the readme, build then run the app. Let me know what happens

…

On Fri, Jan 6, 2017, 6:49 PM Samuel Ikechukwu ***@***.***> wrote: message wasn't long, I read everything. :) ..yes, I added the xmlns to page like you described in usage. Just to be sure, below is the xml for the page. <Page loaded="pageLoaded" xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:FAB="nativescript-floatingactionbutton"> <Page.actionBar> <ActionBar title=" "/> </Page.actionBar> <StackLayout orientation="vertical"> <GridLayout> <GridLayout scaleX="1" scaleY="1" class="background"></GridLayout> <GridLayout scaleX="1" scaleY="1" class="background-overlay"></GridLayout> <GridLayout class="container" rows="70,auto,auto,*,20"> <StackLayout row="1"> <TextField text="{{ verifyInput }}" id="verifyTextField" hint="xxxxxxx" autocorrect="false" autocapitalizationType="allCharacters" returnPress="verify" returnKeyType="go" /> <Button text="Verify" tap="verify" class="btn-primary btn-verify" /> </StackLayout> <StackLayout row="2" verticalAlignment="bottom"> <Button text="+" tap="{{ gotoRegister }}" class="register-shortcut" horizontalAlignment="right" /> </StackLayout> <StackLayout row="3" verticalAlignment="bottom"> <FAB:fab tap="{{ gotoRegister }}" row="1" icon="res://my_icon" rippleColor="#f1f1f1" class="fab-button" /> </StackLayout> </GridLayout> <ActivityIndicator busy="{{ isLoading }}" /> </GridLayout> </StackLayout> </Page> In the code, the Button just above your FAB, is what I currently use as my FAB. But I couldn't get the border radius to be perfect, so I need yours to work and save me. :) I have fully built again, but the problem is still there. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#43 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFulhBCknP3yL_UPt0-Wkew2GEMVItT3ks5rPuEpgaJpZM4LdOf-> .

[holymp2006]

ok. I built the new app like you suggested and used your XML. But at startup, the app crashes with the same error (JS ERROR Error: Building UI from XML. @file:///app/main-page.xml:12:13 ...) as the one I posted above.

[bradmartin]

I just cloned the repo and ran the demo app using the latest NS versions of everything. Can you show me the actual commands you run, in order from starting a new app and trying this plugin? Then we can compare and see where something might be wrong.

[holymp2006]

ok.
tns create my-app-name --template typescript
I cd into the app project folder and
tns install typescript
npm install nativescript-floatingactionbutton
paste your page code, change your loaded="pageLoaded" to their loaded="navigatingTo", as navigatingTo is the exported function in the template's "main-page.ts".
then
tns run ios

[bradmartin]

K. My flow is: `tns create test --tsc` `tns platform add android` `tns plugin add nativescript-floatingactionbutton` `tns build android` `tns run android` Same build and run for iOS should work. Didn't test while ago though. If that's causing an issue the cocoapod might not be installing correctly for you which is another crappy issue with pods and different versions of cocoapods I've seen. Try those steps and let me know if it works adding the fab to the page

…

On Fri, Jan 6, 2017, 7:53 PM Samuel Ikechukwu ***@***.***> wrote: ok. tns create my-app-name --template typescript I cd into the app project folder and tns install typescript npm install nativescript-floatingactionbutton paste your page code, change your loaded="pageLoaded" to their loaded="navigatingTo", as navigatingTo is the exported function in the template's "main-page.ts". then tns build ios — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#43 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFulhLzlmCSNilIMLY4yBQLL71pUO4QBks5rPu_-gaJpZM4LdOf-> .

[bradmartin]

Sorry if that's on the README :( let's leave this open so I can get to it later or you can submit a PR for the update of the command :)

…

On Fri, Jan 6, 2017, 8:40 PM Samuel Ikechukwu ***@***.***> wrote: Ok, I think I see the problem. You never said anything about installing as a nativescript plugin. I installed as an npm package like the instruction says npm install nativescript-floatingactionbutton tns install installs other dependencies too, in this case; "Installing MNFloatingActionButton (0.1.5)” I installed as nativescript plugin, tns plugin add nativescript-floatingactionbutton ...and everything works fine. Thanks for the plugin, Brad. :) — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#43 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFulhKkH3-nBVlBDNZlDtuGfhSgYwN3-ks5rPvszgaJpZM4LdOf-> .

[holymp2006]

Alright Brad, :) PR submitted.