How do I support RouteParams on page reload using Angular 2 Dart?

I'm using the Router and RouteParams in Angular 2 Dart.

My routes are as follows:

@RouteConfig(const [
const Route(path: '/', component: ViewLanding, as: 'home'),
const Route(path: '/landing', component: ViewLanding, as: 'landing'),
const Route(path: '/flights', component: ViewFlights, as: 'flights'),
const Route(path: '/picker/:cityDepart/:cityArrival/:dateDepart/:dateArrival/', component: ViewFlights, as: 'picker'),
const Route(path: '/order/:id/:level/:dateDepart/:dateArrival/', component: ViewOrder, as: 'order'),
const Route(path: '/order/complete', component: ViewComplete, as: 'orderComplete')
])


Application entry point:

void main() {
print('-- Main.dart 2 --');
bootstrap(Tickets, [
routerInjectables,
client_classes,
// The base path of your application
bind(APP_BASE_HREF).toValue('/'),
// Uncomment this if you want to use '#' in your URL
bind(LocationStrategy).toClass(HashLocationStrategy)
]);
}


This works fine with router-outlet / router-link / router.navigate

However, on page reload, I don't get a positive match for routes with parameters. That is, if I refresh http://localhost:8080/#/picker/SAN/SFO/2015-01-01/2015-04-02, I go to a the parent view without any child routes. This symptom is true for any route with parameters.

Navigating directly to or refreshing to http://localhost:8080/#/flights/, it works as expected. The ViewFlights component is instantiated

Symptoms: Routing with parameters fails.

How do I define route configurations to work with parameters on refresh?

References:

• File main.dart
• File tickets.dart

Continue reading...