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

user_6184441 0
Viewed 866

I have a component named : WhatsAppConversationComponent in dashboard module. I am unable to route to the WhatsAppConversationComponent using routes in dashboard routes.

My Dashboard module

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

export class DashboardModule { }

My Dashboard Routing Module

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
    }]
  }
];

When i reach route / whatsappconversation , i face the following error : -

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

The Error above is not loading the component onn the UI

angular-routing angular typescript
3 Answers

You've got an extra comma here after your survey route

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

That can't help. But that isn't what is causing this error. Since your root path isn't going to a particular component, Angular thinks you're making something called a Componentless Route. See: https://angular.io/api/router/Route. Componentless routes require you to specify outlet: 'aux' so that Angular knows what the primary outlet component is going to be in the merged route.

I doubt this is what you were to do though. You should specify a root component before the child routes to avoid this error. This will stop Angular from trying to merge the child routes.

user_82187260

In your DashboardRoutes route configuration root route has no option defined neither component or redirectTo.

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

you should use just one ','

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