具有命名路由器导出 : ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL 段的 Angular 辅助路由

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 导航到辅助路由的重要信息？
以下是直接在 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 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 不会抛出正确的错误消息似乎是一个已知问题。

谷歌浏览器:

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

这里是解决这个问题的代码 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只要您制作了单独的路由文件，顺序就很重要

有关更多详细信息和引用，请查看上面提到的链接。