Loading page modules (or at least templates) from remote server

If I build a Ionic 3.9.2 App using lazy loading, with the @IonicPage decorator, a NUMBER.js file is generated inside the build directory for each page.

If I look with the debugger the running App I can see that, while entering into each page, the corresponding NUMBER.js file is loaded on-the-fly from the file:///android_asset/www/build URL.

What I would like to do, is to be able to have it loaded from a remote server instead, from an URL such as https://example.com/www/build.

That way I could modify existing pages (modules), recompile them with AOT and have existing App instances use them.
Beeing able to modify mobile Apps without resubmitting to App stores is one of the strongest point of hybrid Apps against native ones.
With Angular 1 was quite easy to send the templates from server (at the least sending the templates could be enuogh), but with Angular 2+ (and AOT), it seems almost impossible…

Having templates served from a remote server is possible by simply using a remote URL inside templateUrl, but it does not work if AOT is used, so it may be easier to send the entire module, I don’t know…

Thank you very much in advance for any help, or for any alternative way to reach the same goal.

1 Like

What is it you actually want to do?

Do you only want to be able to update templates in your app from time to time?
Or do you really need fully dynamic templates?
Can’t you build your app to dynamically create the template depending on an API response for example?

Yeah, the “block strategy” is an example of this. Though I’m not sure it’s ever been done in real life, or was just an idea that came from this forum.

Honestly, though, couldnt the OP just get a PRO membership and not worry about any of this? It sounds like lots of extra work.

I need to be able to update at least the templates in unforesaw manners, so the App must be “ignorant” of it.

Speaking about Ionic PRO Deploy, it sounds like what I need and that means it indeed is technically possible, isn’t it?

Sure enough I may give Deploy a try, but I’d prefer to be able to do it myself, if at all possible…

Deploy is replacing the whole (web) app. One Angular app out, another in, restart.

So it loads the whole Cordova code from a remote server URL instead that from "<content src="index.html" /> as usual, or something like that…
Never thought about doing it that way, but it makes sense, expecially since from version 4 on, Ionic won’t be tied to Angular anymore, so a more “low level” solution is needed.
Obviously I’m talking about the JS/HTML/CSS code here, since the native part must be submitted to App stores anyway.
Thank you for this information, I’ll think about it!

Yep, but it is not the Cordova code (which is everything around the part that is replaced) but the Ionic app code that is getting downloaded and replaced.

I found that simply setting the “publicPath” of the Webpack configuration (there are two of them in devConfig and prodConfig) to a remote server URL does the trick.
All the numbered code chunks (0.js, 1.js, etc.) will then be loaded from that remote URl instead that from “file:///”.
Then it’s just a matter of copying the generated local build directory to the remote server and it works.
If you change something, you have to do a new build and copy the new generated build directory to the server for already distributed App instances to pick up the changes.
I also find, though, that it does not always work…
If you change the HTML, it seems to be no problems, but if a page TypeScript code is changed, it does not work.
Probably main.js bundle inside the App instances is not compatible with the new one and the numbered chunks are loaded, but an error arise.
So this solution seems to work for loading templates from server, but not modules code, so it is not a complete and robust solution…

1 Like

I recently went into this problem too. The NUMBER of js file is generated same every time, so it won’t refresh the cache. I’m wondering if you find solution yet? Or maybe I need to give up on lazy loading. Thank you.

@caipirginka did u find the way to implement this? I am trying to implement the same but no idea if it is possible

No, I’m sorry…
I didn’t have the opportunity to use newer versions of Ionic (still locked into V1)… :unamused:
Maybe we’re moving forward to Ionic 4 in the next months, and so I may be looking into this matter again, in this case I will report here if I discover something new.