integrating GWT and angular2

Question

I have a big project in GWT and i'm trying to integrate Angular2 with it. (angular2-gwt is not an option as i'm running on version 2.7 and can't migrate to 2.8 at the time)

I'm facing a couple of problems i don't seem to know how to face:

1) I heard that you can use JSNI to use the angular app but i didn't seem to be able to do that or to find any information about it. how does it work and what can i do with it? (invoke a function is an option?)

2) I tried to add the selector tag of the angular app to the GWT entry point html and that works well but when i'm trying to add the selector to a .ui.xml file (UI Binding) it doesn't work, why?

3) Is there an option to invoke the GWT client side from a servlet? What i mean is i'm at the angular2 app and use a rest call, can this rest call invoke something on the GWT Client side?

Thanks!

Answer 1

First off, I should note that migration from GWT 2.7 to GWT 2.8 was pretty painless for me. I updated my apps and didn't had any major issue (some Maven dependencies that changed, some flag here and there, etc). I'm mentioning this because native JS support is vastly improved in GWT 2.8 vs GWT 2.7, so if at all possible you really should do the switch.

Regardless, in GWT 2.7:

1. You can call any kind of JS from GWT like this:

public static native void sayHello() /*-{ $wnd.alert("Hello world!"); }-*/;

Note the $wnd construction which is placeholder for the "global" namespace in JS (i.e. in JS you'd simply call alert() without using a specific namespace).

Please be aware however, that if you're interfacing with a lot of JS native code (such as using complex objects from angular), you will pay a hefty price for going this route. This route is good for when you want to invoke a function or two from JS, but other than this I don't recommend it. You could have a look for example at the source code of gwt-openlayers at http://www.gwtopenlayers.org/ and see how it looks like for a more complex example (this library wraps a lot of native JS)

2. I don't really know any angular, but the .ui.xml is a special beast. Some obfuscation takes place in the background / some other stuff happens. The closest you will get to HTML, is to put some stuff inside a g:HTMLPanel widget, but to my knowledge, you can't really have JS in there.
3. A bit confusing what you're asking here. You can't easily invoke any client-side code from a server-side servlet, unless you insist; then, you could do workarounds and use techniques such as long polls, etc, but I'm not a big fan of those. I can expand more on the subject, but it appears that my understanding of your point might be lacking.