How to use angular 4 Router in Ionic 3 project?
I am developing a hybrid application. It is easy to navigate between pages with an ionic navigation router, but it does not use the "URL" of the browsers.
I saw that we can point to the ionicModule our links. Using this every time you navigate somewhere you can specify the associated path and ionic will change it in your browser. BUT using this if you refresh your browser the app will be lost and you will have to return to the home page.
I thought I could just use the angular router, but how in ionic 3?
thank
source to share
First, you are referring to ionic-native v3 in your comment. However, ionic and ionic are not the same. Ionic v3 was not officially released when you asked your question, so if you haven't been using the beta, I assume you are still using v2.
You don't need an angular router for urls. In Ionic v2, you can do it like this:
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 application by visiting https://example.com/
or https://example.com/event/1
. When you reload the website, the setting defaultHistory
ensures that you still have a navigation bar to navigate to the previous page.
In ionic v3, you can use the IonicPage annotation to customize your routes: https://ionicframework.com/docs/nightly/api/navigation/IonicPage/
source to share