Ionic dynamic templates with aot

I’m rewriting a quite complex ionic 1 project to ionic 3 and i’m facing quite difficult issue -

Small part of the app is fetching some html content (including forms) from the server and these were compiled in the i1 app on the runtime (including ionic and custom components/directives) . I am trying to find a solution how to handle this in ionic 3.

One of the options is to disable aot ( build with --dev) and use ComponentOutlet , but i’m afraid this might affect the overall perfomance of the app, and i’m aware that it’s not a good practice in general… Another option would be to move the content into InAppBrowser and serve it from the server, but again this doesn’t feel right…

Are there any other possibilities, like using JIT compiling only for small part of the app and have the rest precompiled?
Client insists on having the content dynamic to be able to control it without releasing new app versions (it changes quite frequently)

There will be no support for this, at all, in Ionic 4. So the client needs to know you’re being required to write an app that literally cannot be supported long term. There might be a way to do something with bubble gum in Ionic 3, but Ionic 4 is coming soon, so you have to decide how critical that is for you.

One possible option is to explore getting the client a paid membership in Ionic. The update features provided might be worth it.

If the container stays the same and only the content changes, that’s different. (Example: container is a list, and the items in the list change.) But other than that, the whole purpose of AOT is to sacrifice runtime flexibility for speed.

1 Like

Thank you @AaronSterling for pointing that out, wasn’t actualy aware of the changes in ionic 4. So technicaly this leaves me with 2 options -

  • either serve dynamic content in iab (or themeable browser in my case) #notnice
  • or write a component that will be able to construct the content from the data served from the api without the need of JIT compiler

There might be a third alternative, in which you come up with an intermediate transfer language for the dynamic content that is rendered using static templates. See here for more info.

Thanks @rapropos, i was actually looking at that post while i was searching for a solution before writing this post.

What is the format you are getting the dynamic content from the server? I’m not familiar with markdown, but i assume this will not work with some more sophisticated elements like forms/inputs etc. , or it will require extensive work to achieve the functionality…

It’s sort of like BBCode or a more writer-friendly HTML.

I guess that involves some subjective judgments, but I think forms could definitely be done, and I would argue that it would be both easier and more futureproof than putting effort into trying to subvert Angular’s strong desire to have templates be available at compile time.

Fundamentally, I would try to model your “dynamic forms” as heterogeneous lists of elements - labels, inputs, checkboxes - all the elements we have in HTML forms, and then iterate across them using static components. Here is another thread discussing the strategy with a different example.

this was exactly what i had in mind by writing a component to construct the content. It will require a breakdown of all the existing server side templates into some parseable format (possibly JSON) , but will be probably worth it in the long run.

Thank’s a lot for your insights, much appreciated!

Huh? What, how, why?

1 Like

Ok, I read that so you can’t switch between iOS and Android styling dynamically.
Does this match how you understood it and what it means?

Eh, now that you press me, it might not be exactly what the OP meant by “dynamically.” So my post might have been wrong. I don’t see any reason the @rapropos block strategy would stop working. But I think it’s more than just iOS/Android. That’s the specific example, but it sounds as though all style variables will be completely fixed. So the direction of motion is away from runtime component creation, and toward compile-time component creation. (It was that way before of course, but even more now.)

1 Like

Sorry for posting into an old thread, but I have the same needs as the OP.

Wiil it actually be like you said?

There will be no support for this, at all, in Ionic 4.

That is, will it be possible to use the Angular JIT compiler with Ionic 4, or will it be AOT only?
Obviously, I’m talking about using Ionic with Angular.

I don’t know, and as I already said in this thread, my post might have been wrong.