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

编程问答 2022-08-16

问题描述

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

我的仪表板模块

FindInterval(double x) => Functions.Keys.FindBinary(i => i.Contains(x))

我的仪表板路由模块

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

export class DashboardModule { }

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

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

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

解决方法

在您完成勘测路线后，这里还有一个逗号

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

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

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

,

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

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