Use Nativescript Core plugin in Nativescript Angular project

Question

I am using in my Nativescript Angular app the nativescript-google-maps-sdk plugin which works great.

My issue is that I want to use cached images to display in a custom InfoWindow. For this purpose I am using the nativescript-web-image-cache plugin app-wide. When I use the regular <WebImage> tag in the infoWindow it complains that it is not a registered component:

Module 'ui/web-image' not found for element 'WebImage'

Everywhere else in the app it works just fine. In this issue is it suggested that:

that InfoWindowTemplate content is parsed as Vanilla NativeScript XML, not as Angular XML thus it is not able to find custom Angular Component you created

So the question is how can I still use this plugin? Is there a way I can somehow register the <WebImage> component so it will work in the custom InfoWindow?

Just to make sure there is not another issue, I added the nativescript-web-image-cache plugin to the plain NativesScript nativescript-google-maps-sdk demo project and then the <WebImage> tag works just fine.

Any pointers are highly appreciated!

Did you try passing xmlns:IC="nativescript-web-image-cache" in the root element and instead of <WebImage> try <IC:WebImage>, at least that's how you would register elements in Vanilla NativeScript, so it should work. — Manoj
– Manoj, Commented May 1, 2019 at 21:31
@manoj actually I did try adding a Page element and adding the xmlns to it. It doesn't complain about "module not found" anymore but it doesn't display either... — Joni
– Joni, Commented May 1, 2019 at 21:47
You shouldn't add Page, it can be only added inside a Frame, use a layout instead. — Manoj
– Manoj, Commented May 1, 2019 at 21:49
@Manoj well you (and Nathan on slack) were right indeed. Avoid the Page element and I had an issue with brackets, but got it working. Thanks a lot! — Joni
– Joni, Commented May 1, 2019 at 22:07

Nathanael · Accepted Answer · 2019-05-01 22:19:11Z

Anything registered in Angular is not available in Core the same way; so if you have to create a core template; you must also pass in the xmlns:blah="ns-blah" as part of the core template, so that it is registered properly in that core template. The angular registerElement does not do anything for Core. Now you can easily do <IC:WebImage xmlns:IC="nativescript-web-image-cache" ...> and then it is valid in the template. However, I would recommend you put the xmlns:IC on the topmost element you can; as it makes reading the code a lot simpler. But in cases you don't have a parent wrapping element around the item, this is valid code to register it on the same element using it.
NS-Core templates are different than NS-Angular templates; if you attempt to use things that work in Angular like <IC:WebImage [param]="value" (param)="value"/> both the [param] and (param) will totally break template parsing in core. NS-Core's parser is like HTML, nothing is supposed to surround the param and the value should be in quotes. The value can have {{ boundvalue }} to bind a dynamic value into the template.
Normally when passing a NS-Core template into whatever function you need; you want to pass in just the minimal parts; you rarely need to use things like <Page>, <Frame> or any other top level elements. In fact this can cause problems. You normally need just the piece of the layout you are going to have it view. So in this case <StackLayout xmlns:IC=...><IC:WebImage...></StackLayout>
Finally when troubleshooting using Core features in Angular; I highly recommend you put fixed Width/Height and Background colors on each element. This can sometimes show you what is failing.

Manoj · Accepted Answer · 2019-05-01 22:10:20Z

1

As InfoWindowTemplate content is parsed as Vanilla NativeScript XML, you could add xmlns:IC="nativescript-web-image-cache" to the root / parent element of your component. Also use <IC:WebImage> instead of WebImage.

answered May 1, 2019 at 22:10

Manoj

21.9k3 gold badges24 silver badges42 bronze badges

Collectives™ on Stack Overflow

Use Nativescript Core plugin in Nativescript Angular project

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related