Ionic v4 routing conversion from v3, thoughts

royappa · March 15, 2019, 4:27am

I returned to ionic after a long absence during which v3 had changed to v4. Most of the upgrades were easy, but of course as they warn, Routing has changed a lot. Here is a ramble about how I converted my simple v3 “master-detail” routing to v4.

First the v3: there was a “meds” page with the master list of meds, and clicking one item took you to the “detail” page. In the old “meds.html” I could do this:

     <ion-item *ngFor="let med of meds" text-wrap>
      <div class="inner" (click)="itemSelected(med)">

And in the corresponding old “meds.ts” typescript file that function was:

itemSelected(item) {
     this.navCtrl.push(MedDetailPage, {
       item: item
     });
  }

And finally in the old “med-detail.ts” we simply injected “public navParams: NavParams,” and then did this:
this.item = navParams.get('item');
The detail page has easily grabbed the item that was clicked in the master page. Done.

Ionic v4 conversion

We have to add this route:

app-routing-module.ts:
 { path: 'med-detail', loadChildren: './med-detail/med-detail.module#MedDetailPageModule' }

The master HTML in meds.page.html must now pass the clicked object’s ID, and not the whole object:

     <ion-item *ngFor="let med of meds" text-wrap>
      <div class="inner" (click)="itemSelected(med.id)">

Fair enough, we can’t pass a whole object. The rest, though, took a lot of time to figure out.

The meds.page.ts is now like this:

  itemSelected(itemId) {
    this.navCtrl.navigateForward(['/med-detail/'], {queryParams: {id: itemId}});
  }

In the med-detail.page.ts, where this navigation ends up, I have to inject “private route: ActivatedRoute” (here I had to figure out why “ActivatedRoute” vs. just “Route”, but it’s an Angular thing I guess).

Then fetch the ID from the parameters and re-constitute the object back from its ID:

    const id: string =  this.route.snapshot.queryParams['id'];
    this.item = this.medService.getMed(id);

It took a while and as usual a lot of Googling, Josh Moroney’s awesome site, etc., but it works.

General thoughts:

Routing in Ionic v3 felt very object-oriented. A page was an object, you navigated to page objects with a simple stack, passing parameter objects as you go. It felt uniquely “Ionic”. Now in Ionic v4, we have to get dirty with actual page paths, object IDs, and parameter syntax where positioning of “:” and “/” is very important.

Having to go back and learn about things like “href”, “routerLink”, and concatenating paths with parameters – things like “’/med-detail/’ + med.id” or whatever – feels very raw, very old-school. I know it’s Angular, and it’s easy enough to learn. It just does not feel “Ionic” at all.

And for me this is a big loss. It’s just not as much fun to write, and navigation is a huge part of any app. I sincerely hope this can be “re-ionized” and the “routing” part hidden. I will learn a nice clean new API for navigating.

Simple master-detail parameter passing is not yet fully explained in the official documentation. To get my v3 demo working in v4, I had to dig into code: https://github.com/ionic-team/ionic/blob/master/angular/src/providers/nav-controller.ts and then dig into the Angular stuff used by Ionic, which led to this useful page: https://angular.io/api/router/NavigationExtras

That’s finally where I learned about “queryParams” - without which you can’t pass query parameters.

Currently a Google search of “site:ionicframework.com/docs queryParams” returns no v4 matches. Maybe it’s somewhere else, but without queryParameters, you have to go really old-school. I refuse to concatenate params with ‘?’ and ‘+’ and what-not!!

Finally, a few minor things:

I am confused about https://ionicframework.com/docs/api/nav which refers to push/pop of pages.
Is this a first-class citizen of ionic-v4 suitable for use as a “v3-style” navigation system?
Or is this only for modals, as hinted at the top of the document?
Or is this something which will be deprecated?
An “Improve this doc” link in v4 docs would be nice.
Wondering why there is no ionic-v4 tag in the forum, maybe to get away from version numbers?
Google v4 documentation, and the top search result link is v3. I think adding a v4 link on top of the v3 pages would be nice. Image below shows what I mean.

Thanks for reading! Corrections, comments, suggestions all welcome.