Угловые вспомогательные маршруты с именованными выходами маршрутизатора: ОШИБКА Ошибка: Uncaught (в обещании): Ошибка: не удается сопоставить никакие маршруты. Сегмент URL

Question

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

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

---

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

Mozilla Firefox:

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 не выдает правильные сообщения об ошибках.

Google Chrome:

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

---

Окружающая среда (угловое исполнение: нг в)

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

Answer 1

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

в 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: ''
      }
    ]
  }
];

сделать

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]

сделать

exports: [RouterModule]

в app.component.html

вместо

<h1>
  app component
</h1>

<router-outlet></router-outlet>

сделать

<h1>
  app component
</h1>

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

в app.module.ts

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

добавить

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 порядок важен, пока вы сделали отдельную маршрутизацию файл

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

Answer 2

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

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