Using Angular Routing with Ionic 4
- The typical push/pop style navigation that Ionic has used in the past will still be available, and you can even use this style of navigation directly through Ionic’s web components, but the recommended approach moving forward will be to use the Angular Router.
- Angular is a bit of a special case in this regard – since Ionic/Angular have been tightly integrated in the past, the Ionic specific push/pop navigation already exists and is being used by people in their applications currently.
- Keep in mind that although the way Angular routing will work with Ionic is mostly the same as normal Angular routing, and so you can just rely on Angular documentation or resources for routing examples/advice, Ionic does have its own router outlet implementation called (basically, you just plop the router…
- If you’ve been building Ionic applications then you would be used to navigating through your applications by pushing new pages to navigate forward in the navigation stack: – – Popping pages to move backward in the navigation stack: – – or starting a completely new navigation stack by changing the…
- The set up might seem a bit convoluted, but like with lazy loading in Ionic 3, it’s all pretty much the same for every page, and it will all likely be set up by default, so you don’t really need to think too much about it.
In this article, we take a look at how to use Angular routing in Ionic 4 (and why you should use it)
@ngnewsletter: “Using Angular Routing with Ionic 4” @joshuamorony
Recently, I published an article that talked through some of the expected changes for the upcoming Ionic 4.x release. Most of the changes that will be introduced are behind the scenes, and there won’t be that many changes required for updating your Ionic 3.x applications to 4.x. Ionic 4 has not officially been released yet, some of what is discussed in this article may change, and some parts are speculation.
Perhaps the most noticeable change coming in Ionic 4, and the one that will require the biggest change in your existing applications, is the move to Angular style routing. The typical push/pop style navigation that Ionic has used in the past will still be available, and you can even use this style of navigation directly through Ionic’s web components, but the recommended approach moving forward will be to use the Angular Router.
NOTE: If you need more context around the upcoming changes to Ionic, specifically the focus on web components and what that is all about, I would recommend reading this article.
The Ionic team is aiming to make Ionic more generic so that it isn’t tied to any specific framework, and implementing their own navigation/routing for each framework could get quite messy and would ultimately be somewhat unnecessary. Instead, you should just rely on the native navigation for whatever framework it is that you are using Ionic with. Angular is a bit of a…