Using Ionic 2 as a browser based web application vis-à-vis --no-cordova not recommended?


#1

We realize that the Angular 2 team is still working out their new router and i have seen threads indicating that the Ionic team is waiting on integrating the ability to use it until it is ready, however…

Our team has run out of time and had hopes to use Ionic 2. Our launch date for our beta is July 1.

3 Questions:

  1. Is it bad practice, or just not a good idea to use Ionic as a browser based application? Are we incorrect in thinking --no-cordova is intended for this purpose?

  2. Does the Ionic team absolutely intend on integrating the ability to use the Angular router when it is ready? Can you offer any insight into when you feel Ionic 2 would support the use of the Angular 2 router?

  3. Can you offer any examples that use <router-outlet> instead of <ion-nav> or is this the wrong approach all together.

ANY reply as soon as possible ever so greatly appreciated.


#2

I’m not the best to talk but here’s some answers:

  1. The --no-cordova flag is indeed intended for using the ionic libs without cordova, which can only means it’s for web or for mobile browsers.
  2. I have read from an ionic staff member that they intend to support it, however they have disabled the legacy router and the new-router is still somewhat far from being ready, so for the moment the only routing officially supported is the LIFO stack provided by Ionic.
  3. Maybe if you hack the router into an ionic app, however i have no examples, sorry.

#3

Thank you sincerely for the quick reply.

We are desperate for an example Ionic 2 app which uses the Angular 2 router.


#4

If you find one let me know, not that i need it but i’m interested in how the router would work with the build process of the ionic app.


#5

We had an app working on Ionic 2 Beta 6 using the @RouteConfig example as described here: http://blog.ng-book.com/basic-routing-in-angular-2/. The resulting URL’s had the hash-style routing such as http://myserver.com/index.html/#/route.

We just updated to Ionic 2 Beta 7, which includes NG 2 RC1, which has changed routing significantly and moved the @RouteConfig to a different library (deprecated router).

We’re on a similar time frame of deploying an Ionic 2 app as a web-based application and so looking forward to figuring this out. I’ll let you know as we have an example that we can share.

One of the significant changes with routing seems to be the LocationStrategy and whether to take an HTML5 approach (fine for IE11 and higher) or a hash location strategy. This thread has some useful background: Ionic2 and routing and hotlinking.

Angular seems to be recommending HTML5 approach to allow for server-side rendering (e.g. through Angular Universal / NodeJS), as the hash strategy only works once the user has downloaded the app. Even using the “Ionic build --release” approach, we’re still seeing app bundles of 1.4MB, which seems pretty heavy. Getting Ionic 2 to work with Angular Universal is another area that seems important for using Ionic 2 in a Progressive Web App scenario.


#6

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:

  1. 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.
  2. I believe that to be the case. It is currently disabled in Ionic2 beta7 due to major changes that the router is going through.
  3. 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;

}


#7

That’s really helpful. It would be great if Ionic updated the Ionic Serve function to allow push states instead of returning the 404 error.

Regarding old browser support with HTML 5 pushstate routes, this link shows browser compatibility on pushState feature: http://caniuse.com/#search=pushstate. Unless you’re trying to support IE 10, then it’s probably best to do pushstate.

Seeing how Beta 7 disables routing altogether (including the router-deprecated module), and that beta 7 has some essential features for us, we’ll use a very temporary hack solution for simple routing until Angular routing is available.

We’re only using routing to provide different entry points into the application (e.g. let users go straight to a sign-in / register page, or let us (as developers) go to a temporary page for launching different pages of the app for dev and testing).

This is a very quick fix but here are the changes that we did to app.ts to get super basic routing:


import {Location} from ‘@angular/common’;

// Add the Location provider to the @App declaration as in:
@App({providers:[CORE_SERVICES, Location]})

export class MyApp {
rootPage: any;
// rootPage: any = ARegisterPage; // This page object starts the launcher navigation for development and demo purposes

constructor(platform: Platform, location: Location) {

// Temporary workaround until Angular Routing is available in Ionic 2
var routePath = location.path(); 
if (routePath == '/dev') { 
  this.rootPage = ULauncherPage;  // Dev Start route for http://localhost:8100/#/dev
} else { 
  this.rootPage = ARegisterPage;   // default start page 
}
  
platform.ready().then(() => {
  // Okay, so the platform is ready and our plugins are available.
  // Here you can do any higher level native things you might need.
  console.log("Platform is running");
  StatusBar.styleDefault();
});

}
}


Hope that helps


#8

We are trying to use @angular/router with ionic2. Can someone help us? Are someone doing the same?
We think the ionic2 router or DeepLinker is not flexible enough to create a PWA or a browsser based web application.

Have someone get this working?

For any help we are very very grateful!


#9

Hey mburger81, any luck on this? I am also trying to user @angular/router to create a web app with deep linking. Looking for an example app.


#10

Hey @jonpopp,
have a look at this post, there are a solution which we have implemented, but we have one issue on it. Have a look and let us know if it is working for you and if you don’t have the problem we have. Also if you have questions, feel free to ask us.


#11

@mburger81, I’m trying to implement ionic2 using Angular2 routing. I followed your example as found here: https://github.com/mburger81/ionic2-angular2-router but could not get Ionic2’s MenuController to open on an iPhone 6 Plus. I can get MenuController to open in my browser on my desktop.

My objective is to use MenuController for phone/tablet devices and a more traditional navigation structure for web.

Any luck on implementing a pop-out Ionic2 MenuController?

Thanks

Tom