Вспомогательные маршруты Angular с именованными выходами-маршрутизаторами: ОШИБКА Ошибка: Неперехваченный (в обещании): Ошибка: Не удается сопоставить какие-либо маршруты. URL-сегмент

Мне трудно заставить работать вспомогательные маршруты даже в минималистичном сценарии. Я почти уверен, я придерживался документации angular по маршрутам и множественным выходам вплоть до Т, так что я действительно понятия не имею, чего мне не хватает.

app.routing.ts:

const appRoutes: Routes = [
  {
    path: '',
    children: [
      // aux route with named outlet, **DOES NTO WORK :(**
      {
        path: 'simple',
        component: SimpleComponent,
        outlet: 'simpleOutlet'
      },

      // default route, *WORKS*
      {
        path: '',
        component: AppComponent
      },
      // fallback route, *WORKS*
      {
        path: '**',
        component: AppComponent,
        redirectTo: ''
      }
    ]
  }
];

app.component.html:

<h2>I am the app component</h2>
<router-outlet></router-outlet>
<router-outlet name="simpleOutlet"></router-outlet>

Прежде чем использовать routerLink, я хотел заставить его работать, введя URL-адрес прямо в браузере. Возможно ли, что я пропустил что-то важное в отношении навигации по вспомогательным маршрутам по прямому URL-адресу? Вот что происходит при прямом взломе URL-адресов:

  • http://localhost:4200/ работает; app.component.html отображается
  • http://localhost:4200/somethingfallback123 работает; из-за резервного маршрута отображается app.component.html
  • http://localhost:4200/(simpleOutlet:simple) не работает, как и http://localhost:4200(simpleOutlet:simple), http://localhost:4200/(simpleOutlet:/simple), http://localhost:4200/(simpleOutlet:simple/) и т. д. (видите, я в отчаянии)

Ссылка на Stackblitz< /сильный>

ЖУРНАЛЫ ОШИБОК:

Мозилла Фаерфокс:

ERROR Error: "[object Object]"
resolvePromise http://localhost:4200/polyfills.js:7882:31
resolvePromise http://localhost:4200/polyfills.js:7839:17
scheduleResolveOrReject http://localhost:4200/polyfills.js:7941:17
invokeTask http://localhost:4200/polyfills.js:7489:17
onInvokeTask http://localhost:4200/vendor.js:70021:24
invokeTask http://localhost:4200/polyfills.js:7488:17
runTask http://localhost:4200/polyfills.js:7256:28
drainMicroTaskQueue http://localhost:4200/polyfills.js:7663:25

Кажется, это известная проблема, что Firefox не выдает правильные сообщения об ошибках.

Гугл Хром:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL             Segment: 'simple'
Error: Cannot match any routes. URL Segment: 'simple'

Среда (угловая версия: ng v)

Angular CLI: 7.0.4
Node: 9.7.1
OS: linux x64
Angular: 7.0.2

angular angular7 router-outlet routing
person RichardM90ger    schedule 12.11.2018    source источник
comment
вам будет легко помочь, если вы разместите свой соответствующий код здесь: stackblitz.com/edit/angular-6s9716 (разветвить и опубликовать ссылку)   -  person לבני מלכה    schedule 12.11.2018
comment
Благодарю за ваш ответ! Я обновил исходный пост.   -  person RichardM90ger    schedule 12.11.2018

Ответы (2)


arrow_upward
3
arrow_downward

здесь код для решения этой проблемы StackBlitz

in app.routing.ts

вместо

const appRoutes: Routes = [
  {
    path: '',
    children: [
      // aux route with named outlet, **DOES NTO WORK :(**
      {
        path: 'simple',
        component: SimpleComponent
      },

      // default route, *WORKS*
      {
        path: '',
        component: AppComponent
      },
      // fallback route, *WORKS*
      {
        path: '**',
        component: AppComponent,
        redirectTo: ''
      }
    ]
  }
];

do

const appRoutes: Routes = [
  {
    path: 'main',
    component: AppComponent,
    children: [
      // aux route with named outlet, **DOES NTO WORK :(**
      {
        path: 'simple',
        component: SimpleComponent,
        outlet: 'simpleOutlet'
      }
    ]
  }
];

и вместо

exports: [RouterModule, appRoutes]

do

exports: [RouterModule]


in app.component.html

вместо

<h1>
  app component
</h1>

<router-outlet></router-outlet>

do

<h1>
  app component
</h1>

<router-outlet></router-outlet>
<router-outlet name="simpleOutlet"></router-outlet>


in app.module.ts

удалите import { Routes, RouterModule } from '@angular/router'; он вам не нужен здесь вы уже сделали отдельный файл Routing

добавить

import { AppRoutingModule } from './app.routing';
import { SimpleComponent } from './simple/simple.component';

вместо

@NgModule({
  imports:      [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([])
  ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})

do 

@NgModule({
  declarations: [ AppComponent, HelloComponent, SimpleComponent ],
  imports:      [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
  bootstrap:    [ AppComponent ]
})

сделайте это, как показано ниже declarations, затем imports порядок важен, если вы создали отдельный файл routing

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

person Amir Fawzy    schedule 12.11.2018
comment
Большое спасибо! Для этого минималистического примера это, наконец, работает =) У меня все еще есть проблемы с моим реальным проектом, где я хочу использовать эту концепцию. Потому что я использую отдельные файлы конфигурации маршрутизации и службы распознавателя, но я уверен, что разберусь с этим. К сожалению, пока не могу поставить вам положительную оценку. Но представьте, я дал вам 200, примерно столько часов я застрял на этом сейчас. - person RichardM90ger; 12.11.2018

arrow_upward
0
arrow_downward

Измените RouterModule на RouterModule.forRoot([]) в файле app.module:

@NgModule({
  imports:      [ BrowserModule, 
                  FormsModule, 
                  RouterModule.forRoot([]) //this line
                ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
person לבני מלכה    schedule 12.11.2018
comment
Благодарю вас! Но я не понимаю, что именно вы мне советуете делать. Разве в вызове forRoot(), как вы написали, не отсутствовал аргумент? Например, forRoot([appRoutes]) (при этом appRoutes импортируется из app.routing.ts? - person RichardM90ger; 12.11.2018
comment
удалите forRoot([appRoutes]) из маршрута, как в этом примере:angular.io/tutorial/toh-pt5 - person לבני מלכה; 12.11.2018