Angular 7 - еще одна маршрутизация Wildcard не работает

Question

Я получил эту ошибку при отладке маршрутизации:

 { path: 'login'                           , component : LoginComponent },
  { path : ''                               , component : DashboardComponent        , outlet: "main-route", pathMatch: 'full'},

  { path: '404'                             , component : PageNotFoundComponent     , outlet: "main-route"},
  { path: '403'                             , component : PermissionDeniedComponent , outlet: "main-route"},
  { path: '**'                              , redirectTo : '404' ,  pathMatch: 'full'}

Это мои маршруты.

Когда я пытаюсь: http://server_ip/not-exist

Я ожидаю перейти к 404стр. Тем не менее, я получил это:

Router Event: NavigationStart
platform-browser.js:211 NavigationStart(id: 1, url: '/not-exist')
platform-browser.js:211 NavigationStart {id: 1, url: "/not-exist", navigationTrigger: "imperative", restoredState: null}
platform-browser.js:216 Router Event: NavigationError
platform-browser.js:211 NavigationError(id: 1, url: '/not-exist', error: Error: Cannot match any routes. URL Segment: 'not-exist')
platform-browser.js:211 NavigationError {id: 1, url: "/not-exist", error: Error: Cannot match any routes. URL Segment: 'not-exist'
    at ApplyRedirects.push../node_modules/…}
core.js:15724 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'not-exist'
Error: Cannot match any routes. URL Segment: 'not-exist'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:2469)
    at CatchSubscriber.selector (router.js:2450)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at zone.js:892
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)

Где я не прав?

ОБНОВЛЕНИЕ 2019/10/07

Угловая ошибка вводит в заблуждение. Angular нужен "неназванный" маршрут. Затем вы можете добавить названную розетку. Тогда я попытался вызвать эту розетку.

Сейчас. Я включаю подкомпонент со своими собственными маршрутами, которые будут добавлены к основным маршрутам.

//app.routing

 {
    path: 'external-module',
    loadChildren: () => import('./external-module/external-module.module').then(mod => mod.ExternalModuleModule)
  },
[...]

//external module routing

    const routes: Routes = [
      {
        path        : '',
        component   : ExternalModuleHomeComponent,
        outlet: 'sub'
      },
      {
        path        : 'second',
        component   : ExternalModuleSecondComponent,
      },
    ];



//layout.html
  <div style="padding: 20px 10px 10px 20px; border: 1px solid black;">
      <router-outlet></router-outlet>
    </div>

    <div style="padding: 20px 10px 10px 20px; border: 1px solid red;">
      <router-outlet name="sub"></router-outlet>
    </div>

При этой конфигурации, когда я нажимаю на эту кнопку:

<button routerLink="/external-module">home</button>

ExternalModuleHomeComponent правильнозагружается в «sub» router-outlet

Когда я нажимаю на эту кнопку:

 <button routerLink="/external-module/second">second linik</button>

ExternalModuleSecondComponent загружается в «основной неназванный» router-outlet И ExternalModuleHomeComponent загружается в «sub»"Аутлет (!!!!!).

Сейчас. Я хочу, чтобы SecondComponent был загружен в «подчиненный» маршрутизатор как его отец.

Затем я попытался просто добавить розетку в качестве отца:

{
    path        : 'second',
    component   : ExternalModuleSecondComponent,
    outlet: 'sub'
  },

Это решение НЕ РАБОТАЕТ. Я загрузил знаменитую страницу 404.

Затем я попытался переместить «второй» маршрут внутри отца:

{
    path        : '',
    component   : ExternalModuleHomeComponent,
    children: [            
        {
            path: 'second', component: ExternalModuleSecondComponent, outlet: 'sub'
        }   
    ]    
    , 
    outlet: 'sub'
}

Еще 404, даже удалив розетку: «sub» у ребенка.

Я очень устал. В интернете нет примеров с включением маршрутизации под-приложения, подобного этому.

Answer 1

Маршрут подстановочного знака должен быть

1. { path: '**', redirectTo : '404'} // если вы хотите перенаправить или
2. {path: '**', component: NotFoundComponent} // показать компонент

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

Подумайте, у вас есть несколько модулей, а WildcardRoutingModule имеет

RouterModule.forChild([
    {
        path: '**',
        component: redirectTo : '404'
    }
])

В модуле Root вы должны указать последнюю позицию для WildcardRoutingModule

@NgModule({
    imports: [
        BrowserModule,
        AppRoutingModule, // included Root routes 
        SignInModule, // included Child routes 
        LayoutModule, // included Child routes
        AdminpanelModule, // included Child routes       

        WildcardRoutingModule // Since it has wildcardRouting, it should be the last Module among all other Routing module
    ],
    .....
})
export class AppModule {
}