Angular auxiliary routes with named router-outlets: ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment

Question

我很难让辅助路线发挥作用，即使是在极简主义的情况下也是如此。我很确定，我坚持 angular documentation on routes and multiple outlets 到 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 导航到辅助路线的重要信息？以下是直接入侵 URLS:

时发生的情况

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 link

错误日志：

火狐浏览器：

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版本：ng v）

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

Answer 1

在 app.module 文件中将 RouterModule 更改为 RouterModule.forRoot([])：

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

Answer 2

这里是解决这个问题的代码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 ]
})

做

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

按照 declarations 然后 imports 顺序很重要，只要你制作了一个单独的路由文件

有关更多详细信息和参考，请查看上面提到的 link。

Angular auxiliary routes with named router-outlets: ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment

Angular auxiliary routes with named router-outlets: ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment

angular

routing

angular7

router-outlet