无法在 Angular 9 中路由组件：TypeError：无法读取未定义的属性“outlet”

Question

我在仪表板模块中有一个名为：WhatsAppConversationComponent 的组件。我无法使用仪表板路由中的路由路由到 WhatsAppConversationComponent。

我的仪表板模块

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(DashboardRoutes),
        FormsModule,
        MdModule,
        MaterialModule
    ],
    declarations: [
        DashboardComponent,
        SurveyComponent,
        QuestionnaireComponent,
        SurveyReportComponent,
        WhatsAppConversationComponent
    ]
})

export class DashboardModule { }

我的仪表板路由模块

export const DashboardRoutes: Routes = [
  {
    path: '',
    children: [{
      path: 'dashboard',
      component: DashboardComponent
    }, {
      path: 'questionnaire',
      component: QuestionnaireComponent
    }, {
      path: 'survey',
      component: SurveyComponent
    }, , {
      path: 'whatsappconversation',
      component: WhatsAppConversationComponent
    }, {
      path: 'survey-report',
      component: SurveyReportComponent
    }]
  }
];

当我到达路线/whatsappconversation时，我面临以下错误：-

core.js:3838 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'outlet' of undefined
TypeError: Cannot read property 'outlet' of undefined
    at getOutlet (router.js:2822)
    at ApplyRedirects.push../node_modules/@angular/router/__ivy_ngcc__/fesm5/router.js.ApplyRedirects.expandSegmentAgainstRoute (router.js:2525)
    at MapSubscriber.project (router.js:2502)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:35)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53)
    at Observable._subscribe (subscribeToArray.js:5)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:43)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:29)
    at MapOperator.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call (map.js:18)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:24)
    at resolvePromise (zone.js:836)
    at resolvePromise (zone.js:795)
    at zone.js:897
    at ZoneDelegate.invokeTask (zone.js:431)
    at Object.onInvokeTask (core.js:27338)
    at ZoneDelegate.invokeTask (zone.js:430)
    at Zone.runTask (zone.js:198)
    at drainMicroTaskQueue (zone.js:611)
    at ZoneTask.invokeTask [as invoke] (zone.js:517)
    at invokeTask (zone.js:1671)
defaultErrorLogger @ core.js:3838
push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.ErrorHandler.handleError @ core.js:3886
next @ core.js:27883
schedulerFn @ core.js:24844
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:192
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:130
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:76
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:53
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.EventEmitter.emit @ core.js:24828
(anonymous) @ core.js:27373
ZoneDelegate.invoke @ zone.js:396
Zone.run @ zone.js:153
push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.NgZone.runOutsideAngular @ core.js:27292
onHandleError @ core.js:27373
ZoneDelegate.handleError @ zone.js:400
Zone.runGuarded @ zone.js:167
_loop_1 @ zone.js:711
api.microtaskDrainDone @ zone.js:718
drainMicroTaskQueue @ zone.js:618
ZoneTask.invokeTask @ zone.js:517
invokeTask @ zone.js:1671
globalZoneAwareCallback @ zone.js:1697

上面的错误是未在 UI 上加载组件

Answer 1

您的调查路线后面有一个额外的逗号

 {
  path: 'survey',
  component: SurveyComponent
}, , {
  path: 'whatsappconversation',
  component: WhatsAppConversationComponent
}, {

那无济于事。但这不是导致此错误的原因。由于您的根路径不会到达特定组件，因此 Angular 认为您正在创建称为“无组件路由”的东西。请参阅： https: //angular.io/api/router/Route。无组件路由要求您指定outlet：'aux'，以便Angular知道合并路由中的主要outlet组件是什么。

我怀疑这就是你要做的事。您应该在子路由之前指定根组件以避免此错误。这将阻止 Angular 尝试合并子路由。