Hi,
I managed to get routing working well with ng2’s router running with Ionic2 beta6. The caveat is that we weren’t able to use the <ion-tabs> and instead had to build our own tab bar. I believe the issue we ran into was having the correct tab be highlighted and also have routes appear correctly in the location bar. We use the PathLocationStrategy to avoid having the hash in the url.
I found that sticking with router.navigate(['/<route name>, <route params>]) via a click handler, and avoiding both nav.setRoot, nav.push, and <router-link>, worked best for us (for desktop browsers, iOS safari, and Android chrome). I also had to build a route params parser to handle any params passed into a route. IIRC, NavParams didn’t get what I needed when a route was hotlinked. I am looking forward to angular2 folks getting the router finalized as we are currently stuck on Ionic2 beta 6. Unfortunately, Beta 7 has routing completely disabled.
To get PathLocationStrategy to work, I have a separate node/express setup to load the index.html page regardless of route. Once that loads, ng2/ionic2 takes over and finds the route based on what’s in the @RouteConfig decorator. Since, the routeConfig contains the route definition and the reference to the applicable Ionic2 page, it does the right thing when router.navigate([“/<route name>”, <route params>]) is called…
To add onto luchillo17’s answers to OP’s questions:
- I think it probably also depends on which versions of browsers you need to support. My understanding is that older browsers are going to have problems.
- I believe that to be the case. It is currently disabled in Ionic2 beta7 due to major changes that the router is going through.
- I’m not sure if it’s the wrong approach. But, based on my experience, I wasn’t able to get
<router-outlet> working. I only have a single instance of <ion-nav> in app.html. The only thing I currently use it for is to get a reference to the nav stack when presenting a modal. Interestingly, using router.navigate still pushes pages on the nav stack.
I hope this helps.
Below is a snippet for our local node server setup:
var express = require(‘express’),
app = express(),
_ = require(‘lodash’),
util = require(‘util’),
os = require(‘os’),
cors = require(‘cors’);
var rootDir = __dirname + ‘/www’,
port = 3002;
app.use(cors());
app.use(express.static(rootDir));
app.get(‘/*’, function(req, res){
res.sendFile(rootDir + ‘/index.html’);
});
app.listen(port);
//===================
console.log('Serving files from: ’ + rootDir);
console.log('Listening on: ’ + getAddresses() + ‘:’ + port + ‘’);
console.log(‘Press Ctrl + C to stop.’);
function getAddresses() {
var interfaces = os.networkInterfaces(),
addresses = ;
_.each(interfaces, function(net) {
_.each(net, function(address) {
if (address.family == 'IPv4' && !address.internal) addresses.push(address.address);
})
});
return addresses;
}