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
– TJ VanToll, Commented Jul 5, 2016 at 20:09
@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
– HK1, Commented Jul 5, 2016 at 21:28
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
– Leo Caseiro, Commented Jul 6, 2016 at 7:46
@HK1: fyi I am using <page-router-outlet> in Groceries. See github.com/NativeScript/sample-Groceries/blob/…. — TJ VanToll
– TJ VanToll, Commented Jul 7, 2016 at 12:36

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

-1

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.

answered Jul 5, 2016 at 14:20

Matt Caswell

438 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

HK1 Over a year ago

I think that's a valid property only in the the deprecated angular router. I get a red underline in Visual Studio Code when I add this to my routes. See Angular's documentation: angular.io/docs/ts/latest/guide/router.html

Günter Zöchbauer Over a year ago

You already have the code for the default route for the new router (the commented out route for path: "".

HK1 Over a year ago

@GünterZöchbauer So do you always use "" for default route? And does that need to correspond to a Component with a Selector of ""?

Günter Zöchbauer Over a year ago

Either forwardTo or component, and yes, always

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related