New Angular2 Router support in Ionic

A simple question, when will the new angular2 router be enalbed and supported in new amazing ionic2 framework.

Are there a roadmap for this? Could it be released with beta 11?

I asked Would "@angular/router": "3.0.0-beta.1" work with beta.10 yesterday. And here is what I tried

package.json

"@angular/router": "3.0.0-beta.2",

app/routes.ts

import { provideRouter, RouterConfig } from '@angular/router';
import { DetailPage } from './pages/detail/detail';

export const routes: RouterConfig = [
  { path: 'detail', component: DetailPage },
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];

index.html

<base href="/">

app.ts

import {APP_ROUTER_PROVIDERS} from './routes';

ionicBootstrap(MyApp, [APP_ROUTER_PROVIDERS], {});

In another page

import {ROUTER_DIRECTIVES} from '@angular/router';

template: `<a [routerLink]="['/detail']"`>Go detail</a>
directives: [ROUTER_DIRECTIVES]

Basically I followed https://angular.io/docs/ts/latest/guide/router.html

But it doesnā€™t work, thereā€™s an error in the console when I issue ionic serve, Iā€™m still trying to figure it out why.

The console error Iā€™ve been seeing is

Error: Uncaught (in promise): Error: Cannot match any routes: ''

The ionic team disabled supporting the router when it was deprecated and created a new alpha router.
The team told me they will support the router new it is stable, but I my question was, when this will happen. I know they now are working on it but the last two beta releases the router was still not supported.

@itlr have you tried setting up a rule for blank ā€˜ā€™.
{
path: ā€˜ā€™,
// /redirectTo: ā€˜/loginā€™,
component: LoginComponent
}

Either you can redirect it to another rule or can load a default component , in my case loginComponent.

Were you able to get this working with Beta 11? If so, can you post a follow up of how? Iā€™m getting the same errors that you are.

@morrisonbrett Still same situation, angular2 router will never work with ionic, wait for new ionic2 router which will released hopefully soon. (beta.12 or rc.1)

Based on this commit history, I donā€™t see it being worked on: https://github.com/driftyco/ionic/compare/v2.0.0-beta.11...master

I havenā€™t tried it on beta.11 yet. I was hoping ionic 2 team could come up with an example.

In general the new router works. Things to note:

  • use ā€œ@angular/routerā€: ā€œ3.0.0-beta.2ā€
  • have a fallback route {
    path: ā€˜ā€™,
    redirectTo: ā€˜/form/mainā€™,
    pathMatch: ā€˜fullā€™
    },
  • ā€œionic serveā€ does not support HTML5 urls (aka no-hash-bang) so you can force angular to use hashes ionicBootstrap(MyApp, [ APP_ROUTER_PROVIDERS, { provide: LocationStrategy, useClass: HashLocationStrategy }, ā€¦

BUT
Of course the ionic navigation does not support this (at least currently) so NavController becomes fairly useless. You either use routerLink/Router.navigate("[/somewhere]") or navigate with ionic without support for angular routes. Maybe one day.

No new ionic url router in rc.0 :confused:

This is a deal-breaker for most web apps. @mhartington does the absence of routing support in RC0 imply thereā€™s no plan for support in 2.0.0?

Agree. This is a huge issue for a web project Iā€™ve been working on. Iā€™ve been telling my team that routing is coming. Weā€™ve all been waiting and are beyond disappointed to see itā€™s still not implemented.

1 Like

Hey guys! Just need to chime in here quickly.

The router implementation is in the codebase, it was just not documented/user ready for this release.

We understand the frustration, and appreciate yall hanging in there.
As for itā€™s status, itā€™s code complete.
We have a few internal folks testing it out at the moment to make sure everything works as expected, and it will be in the next RC.

So long story shortā€¦

Router/Deep Linker is done. Weā€™re doing testing before it gets released released. It will be documented in the next RC.

:beers:

6 Likes

We all are programmers and we understand the problems and the time problems for release a new router like this, we know also it is in beta so nothing is for sure.

The problem is some of us, as me, pushed a lot to introduce ionic2 in our company but we also need a url router to create a webapp. And some people as me has to take responsibility and must explain now to management why we are still not able to finish the app, as you know time is money and why we will missing christmas business for our product.

We know it is all in beta, but please donā€™t say in june it takes a few week (integrating angular2 router) and then after 2 months you say it takes again a few weeks (creating new router) and now after nearly other two months it is still not here.

You all do a incredible good work and we all love ionic2 and your team, but please share more of your road maps and if something will not happen as expected and communicated let us it know as soon as possible.

I hope my personal opinion is understood not wrong! :yum:

Thx you sincerely

1 Like

Thanks, Mike! I took a look at the code and it looks like a config object with a links array gets passed to IonicModule::forRoot, but Iā€™m not clear on how to define a route/link. I see a link can have a name, component, and segment. Is the segment the same format as a path string Iā€™d use in a route object in the angular2 router? Iā€™m sure you have some docs on the way, but any guidance you could provide to help us get started with this would be great.

1 Like

Iā€™ll be adding docs to this in the coming days, and ā€œshouldā€ land in the nightly docs sooon.

7 Likes

Thank you for your hard and superb work.
Is there any documentation on how to use this yet? It will be very useful.

1 Like

@mhartington,

I noticed some documentation on http://ionicframework.com/docs/v2/api/navigation/DeepLinker/. I tried to implement it, but itā€™s not apparent how to get it to work. Is this the correct documentation? Any examples available?

Thanks!

Hi @mhartington,

What about lazy-loading? Is DeepLinker related to lazy-loading? The rc0 upgrading guide refer the angular ngModule page which also mentioned lazy loading. Do it means we can use angular router + lazy loading in ionic rc0? Can you guys provide a simple lazy loadnigrouter example/plunker ? We have a hard time to use lazy loading in rc0. Lazy loading is essential for our app, our app has 50+ pages.

Thanks a lot.

3 Likes