How to use angular 4 Router in an Ionic 3 project?

Question

I am developing an hybrid app. With the navigation router of ionic it is easy to navigate between page but it does not use the "URL path" of browsers.

I saw that we can specifie on the ionicModule our links. Using that each time you navigate somewhere you can specifie the associated path and ionic will change it on your browser. BUT using that, if you refresh your browser the app is lost and you have to go back to the home page.

I thought it could be possible to simply use angular router, but how in ionic 3 ?

thanks

Solution

First off, you are referencing ionic-native v3 in your comment. However, ionic-native and ionic are not the same thing. Ionic v3 was not officially released when you asked your question, so unless you used the beta version, I assume that you still use v2.

You don't need angular router for URL paths. In Ionic v2, you can do it like that:

app.module.ts

export const deepLinkConfig: DeepLinkConfig = {
  links: [
    { component: Home, name: "home", segment: ""},
    { component: DetailPage, name: "detail", segment: "event/:id", defaultHistory: [Home] }
  ]
};

And then include it in your imports:

IonicModule.forRoot(MyApp, {}, deepLinkConfig)

You can now access the pages of your app by visiting https://example.com/ or https://example.com/event/1. When reloading the website, the defaultHistory parameter makes sure that you still have the navigation bar to navigate back to the previous page.

In ionic v3, you can use the IonicPage annotation to configure your routes: https://ionicframework.com/docs/nightly/api/navigation/IonicPage/