Unable to route component in Angular 9 : TypeError: Cannot read property 'outlet' of undefined

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

在您的 DashboardRoutes 路由配置中，根路由没有定义 component 或 redirectTo 选项。

export const DashboardRoutes: Routes = [
  {
    path: '',
   // there should be a component or redirectTo

Answer 2

你的调查路线后多了一个逗号

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

没办法。但这不是导致此错误的原因。由于您的根路径不会指向特定组件，因此 Angular 认为您正在制作一种称为无组件路由的东西。参见：https://angular.io/api/router/Route。无组件路由要求您指定出口：'aux' 以便 Angular 知道合并路由中的主要出口组件是什么。

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

Answer 3

你应该只使用一个 ','

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

Unable to route component in Angular 9 : TypeError: Cannot read property 'outlet' of undefined

Unable to route component in Angular 9 : TypeError: Cannot read property 'outlet' of undefined

typescript

angular-routing

angular

你应该只使用一个 ','