typescript - 无法匹配任何路由 : '' NativeScript, TypeScript 和 Angular2

Question

我正在使用新的 Angular 路由器版本 3.0.0-alpha.7 使用 Angular2 rc3 在 NativeScript 2.1.0 和 TypeScript 1.8.10 中开发一个应用程序。我正在尝试使用 page-router-outlet 但出现错误。我目前正在 Windows 上的模拟器中编译和测试 Android 5.1.1。该应用程序确实为我运行了一次，但即便如此，我还是遇到了 Cannot match any routes: '' 错误。我改变了一些东西(不确定是什么)但是现在当它运行时我只看到一个空白页面，这是我下面的 PageNavigationApp 组件。我的意图是访问第 1 页和第 2 页，但我想我不理解我的 page-router-outlet 组件的作用。除此之外，我在应用运行时看到了很多错误。

这是我的 main.ts 文件中的代码:

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]);

我得到的错误是无法匹配任何路线:“”和无法读取未定义的属性“visitExpression”。

我在 SO Concerning default routes 上找到了这篇文章，我更改了我的代码以匹配(我认为无论如何)。见下文。 angular2 rc3 router alpha 3.0.0.7 default route

编辑

我已将代码更改为以下内容，但出现 visitExpression 错误:

...

@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}
]

我得到的新错误是:

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)

Answer 1

您的问题是您没有为路由器设置默认页面。在路由器配置中，您应该将 useAsDefault: true 添加到您希望首先显示的路由上。