Developing in ionic2 - ionic serve or browser refresh to a particular page rather than back to the first page of navigation stack [Solved]

Ionic Framework ionic-v3
1

At the moment when I am developing in ionic 2, whenever I make a coding/html change and save, the live-reload kicks in and refreshes the app to the first/login page. This is a nuisance because I then have to navigate (filling in forms I’ve already tested along the way) to the page I was testing which can be 3+ pages in the navigation stack. I spend a lot of my developing time just re-going through the navigation to see the results of changes at the page I am actually testing! Turning off the live-reload doesn’t effect the ionic serve or browser refreshing to the first page, because the URL is the generic http://localhost:8100/

In ionic 1 I could just refresh my browser at a particular URL I am testing to see the changes, but ionic 2 doesn’t appear to use URLs for routing?

What are others doing to circumvent this?

2

I had this same problem. Solved using RouteConfig in my app.js file, mapping some urls to components.

Example:

@RouteConfig([
	{ path: '/checkaccess', component: CheckAccess, name: 'Acesso' },
	{ path: '/signup', component: SignUp, name: 'Cadastro' }
}

When I do some push to NavController

this.nav.push(SignUp)

in the browser I can see the url changes, with a hash:

http://localhost:8100/#/signup

then I can access a component through its url, and when app is reloaded, the current url is kept and the app loads with the last component.

3

this is on the roadmap for 2.0.0-beta.5

4

Thanks for the tip! So looks like we have a working solution whilst waiting for the automatic fix in an upcoming beta.

My efficiency just went up 50% :grinning:

5

Seems not to be fully implemented as current version is 2.0.0-beta.23 :frowning: - I’ve commented on above github issue.

6

I started with Ionic 2 a couple of days ago and ran into this issue - here’s a dirty hack to get around it :grinning:

Hacky / Temporary Solution:

All you have to do is set the rootPage within app.component.ts to the page that you’re currently developing - that way it will reload to that location rather than the ‘beginning’ of the app flow.

example:

rootPage = thePageImWorkingOnNow

Of course you’ll have to remember to change the rootPage back to the intended e.g. login page or what have you when you’re ready for production, but for development this saves tens of minutes per day!

Hope it helps anyone running into this issue until we have an official solution.

Cheers,

Jake

1 Like
7

easy solution, saving me time, thanks