Cannot match any routes: '' NativeScript, TypeScript and Angular2

Question

I'm working on an app in NativeScript 2.1.0 and TypeScript 1.8.10 with Angular2 rc3 using the new angular router version 3.0.0-alpha.7. I'm trying to use page-router-outlet but I'm getting errors. I'm currently compiling and testing in Android 5.1.1 in an emulator on Windows. The app did run once for me but even then I had the Cannot match any routes: '' error. I changed something (not sure what) but now when it runs I see only a blank page, which my be my PageNavigationApp component below. My intention is to have access to Page 1 and Page 2 but I guess I'm not understanding the role of my page-router-outlet component. That aside, I'm seeing lots of errors when the app runs.

Here's the code in my main.ts file:

import {nativeScriptBootstrap} from 'nativescript-angular/application';
import {Component} from '@angular/core';
import {Router, RouterConfig} from '@angular/router';
import {NS_ROUTER_DIRECTIVES, nsProvideRouter} from 'nativescript-angular/router';

@Component({
    selector: 'nav',
    directives: [NS_ROUTER_DIRECTIVES],
    template: `<page-router-outlet></page-router-outlet>`
})
export class PageNavigationApp { 
}

@Component({
    selector: "first",
    directives: [NS_ROUTER_DIRECTIVES],
    template: `
    <StackLayout>
        <Label text="First component" class="title"></Label>
        <Button text="GO TO SECOND" [nsRouterLink]="['/second']" class="link"></Button>
    </StackLayout>`
})
export class FirstComponent { }

@Component({
    selector: "second",
    directives: [NS_ROUTER_DIRECTIVES],
    template: `
    <StackLayout>
        <Label text="Second component" class="title"></Label>
        <Button text="GO TO FIRST" [nsRouterLink]="['/first']" class="link"></Button>
    </StackLayout>`
})
export class SecondComponent { }

const routes: RouterConfig = [
    /*{path: "", redirectTo: "/first", terminal: true },*/
    {path: "nav", component: PageNavigationApp},
    {path: "first", component: FirstComponent},
    {path: "second", component: SecondComponent}
]

export const APP_ROUTER_PROVIDERS = [
    nsProvideRouter(routes, {enableTracing: false})
]

nativeScriptBootstrap(PageNavigationApp, [APP_ROUTER_PROVIDERS]);

The errors I'm getting are Cannot match any routes: '' and Cannot read property 'visitExpression' of undefined.

I found this post on SO Concerning default routes and I changed my code to match (I think anyway). See below. angular2 rc3 router alpha 3.0.0.7 default route

EDIT

I've changed my code to the following but I'm getting the visitExpression error:

...

@Component({
    selector: 'nav',
    directives: [NS_ROUTER_DIRECTIVES],
    template: `<page-router-outlet></page-router-outlet>`
})

...

const routes: RouterConfig = [
    {path: '', redirectTo: '/first', terminal: false },
    {path: 'first', component: FirstComponent},
    {path: 'second', component: SecondComponent}
]

The new error I'm getting is:

Uncaught (in promise): TypeError: Cannot read property 
'visitExpression' of undefined at resolvePromise
(/data/data/org.nativescript.myapp/files/app/tns_modules/
zone.js/dist/zone-node.js:496:32)

Hey, not sure if it helps but I just upgraded the master branch of github.com/NativeScript/sample-Groceries to ng2 RC3 and the new router and it’s running so far. That being said, the big difference is I’m not using Firebase (yet), but I thought you still might find it an interesting reference. — TJ VanToll
@TJVanToll Thanks for the update TJ. I'm not using Firebase either, but I'm going to review the Groceries App and see if I can spot any differences. I think for one thing that you aren't using page-router-outlet on Groceries. — HK1
I've tested your code on my ios simulator and worked great. Check your package.json with the github.com/NativeScript/template-hello-world-ng to see if your packages are up to date. — Leo Caseiro
@HK1: fyi I am using <page-router-outlet> in Groceries. See github.com/NativeScript/sample-Groceries/blob/…. — TJ VanToll

Matt Caswell Matt Caswell · Accepted Answer · 2016-07-05T14:20:39

Your problem is that you didn't set a default page for the router. In the router config you should add useAsDefault: true onto the route that you want to have show up first.

Cannot match any routes: '' NativeScript, TypeScript and Angular2

1 Answers