I’m a seasoned Computer Engineer (read “old”) coming from procedural era (Pascal et.al.). A couple of years ago I implemented an Ionic 3/Angular/Cordova project for Android where I mainly used Promise’s.
Nowadays, to refresh myself with a useful example, I’m implementing a “CMS like” PWA with Ionic 5 + Angular 10 + Capacitor. It has different/unrelated/semi-related modules which have their own data, from local JSON files and from generated from remote API’s which we own. It basically is a portal combining data from multiple websites’ into an app-like structure with some additional hard-coded data.
After a months work I found out that I’m forced to only using observables, but I think I also found the so called “observable hell” (I miss the good old days)…
Here is my idea of implementation:
- Data Service - providing the data, mainly in raw format (a singleton object)
- Content Service - A higher level interface which handles the raw data to adjust for the application.
- Components - Using content service to render some stuff (menus, header, footer, dynamic loading of other components to render templates for articles/modules in “CMS” etc)
- Pages - Using Content Service and Components to render the final page.
I try to combine all off them with Observables, so if one process modifies the data (e.g. a menu click) the view changes.
My first question is: Is this the way to go?
I could make a first alpha with dummy data and no business logic work. The first alpha of an alpha can be seen here with some dummy data:
Then I started to implement more.
After a while, I started to get hard to debug runtime errors, each one consuming more time, those only reference main, polyfill & vendor.js. Each time I find the culprit (mainly data not ready) I started to add if-then-else or ngIf controls, .subscribe here and there, get to local variables and try to use them, move code around between ngOnInit and other hooks, put/remove async here and there etc etc.
There must be a major misunderstanding from my side, although I spent a week to read and re-read documentation and many tutorials. Version differences also do not help at all. And most probably I’ve got tired, my brain is neary to explode…
My second question: What is the correct way of chaining observables between my layered objects?
Probably if I would only use DataService and include it everywhere it would work. But when layered (logic dictates that), I cannot get rid of errors.
Must each level subscribe to one lower levels’s data?
Where should it implemented? ngOnInit?
Do need to (re-)implement getters/setters at each level?
I tried to write a minimal code today but again I failed to run it. If I can get some pointers and/or a link to a good tutorial, probably I can correct the code and present here.
Any input is very much welcome.