4

Я работаю над приложением в NativeScript 2.1.0 и TypeScript 1.8.10 с Angular2 rc3, используя новый угловой маршрутизатор версии 3.0.0-alpha.7. Я пытаюсь использовать page-router-outlet, но я получаю ошибки. В настоящее время я собираю и тестирую в Android 5.1.1 в эмуляторе в Windows. Приложение действительно запускалось один раз для меня, но даже тогда у меня была ошибка Cannot match any routes: ''. Я что-то изменил (не уверен, что), но теперь, когда он запускается, я вижу только пустую страницу, которая будет моим компонентом PageNavigationApp ниже. Мое намерение состоит в том, чтобы иметь доступ к страницам 1 и Page 2, но я предполагаю, что не понимаю роль моего компонента-маршрутизатора. В стороне, я вижу много ошибок при запуске приложения.Невозможно сопоставить маршруты: '' NativeScript, TypeScript и Angular2

Вот код в моем файле 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 Что касается маршрутов по умолчанию, и я поменял свой код на совпадение (я думаю, в любом случае). Смотри ниже. angular2 rc3 router alpha 3.0.0.7 default route

EDIT

Я изменил код на следующий, но я получаю ошибку 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) 
+0

Эй, не уверен, что это помогает, но я только что обновил главную ветку https://github.com/NativeScript/sample-Grocceries до ng2 RC3 и нового маршрутизатора, и он работает до сих пор. Тем не менее, большая разница заключается в том, что я не использую Firebase (пока), но я думал, что вы все равно можете найти интересную ссылку. –

+0

@TJVanToll Спасибо за обновление TJ. Я тоже не использую Firebase, но я собираюсь пересмотреть приложение «Бакалея» и посмотреть, могу ли я обнаружить любые различия. Я думаю, что, с одной стороны, вы не используете page-router-outlet в бакалейных магазинах. – HK1

+0

Я проверил ваш код на моем симуляторе ios и отлично поработал. Проверьте свой пакет package.json на https://github.com/NativeScript/template-hello-world-ng, чтобы узнать, обновлены ли ваши пакеты. –

ответ

-1

Ваша проблема в том, что вы не установили страницу по умолчанию для маршрутизатора. В конфигурации маршрутизатора вы должны добавить useAsDefault: true на маршрут, который вы хотите отобразить первым.

+0

Я думаю, что это действительная собственность только в устаревшем угловом маршрутизаторе. Я получаю красную подчеркивание в коде Visual Studio, когда добавляю это к своим маршрутам. См. Документацию Angular: https://angular.io/docs/ts/latest/guide/router.html – HK1

+0

У вас уже есть код маршрута по умолчанию для нового маршрутизатора (пропущенный маршрут для пути: "" ". –

+0

кричит, что вы правы @ HK1 –

Смежные вопросы