Bootstrap组件在Angular应用程序中初始化两次

Question

我的应用程序的主要组件如下所示：

@Component({
  moduleId: module.id,
  selector: 'jm-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
})
export class AppComponent {

  public constructor(private authService: AuthService,
                     private participantService: ParticipantService) {

    console.log('Environment config', Config);

  }

}

虽然一切正常，但此组件已初始化两次。

我认为这是因为为该组件定义了一个路由以及它是一个引导组件：

RouterModule.forRoot([
      {
        path: '',
        component: AppComponent,
        canActivate: [AuthGuard],
        data: {
          roles: [Role.USER]
        }
      }
    ])

的AppModule：

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    AppRoutingModule,
    SharedModule.forRoot(),
    SecurityModule,
    ParticipantModule,
    DashboardModule,
    RequestModule,
    SchoolModule
  ],
  declarations: [AppComponent],
  providers: [{
    provide: APP_BASE_HREF,
    useValue: '<%= APP_BASE %>'
  }],
  bootstrap: [AppComponent]

})
export class AppModule {
}

我确实通过删除此路线来验证它。但是，我确实需要关闭登录后面的组件。正如您所看到的，我正在使用canActivate，但如果我删除路由，我必须使用其他机制。 如何实现应用程序的正确初始化？或者我一般走错路？

Answer 1

原因是，

在

@NgModel({
    ...
    bootstrap:[AppComponent]               //You must be bootstrapping AppComponent here
})

再次通过路由器，您说当路由为''时，请再次发起AppComponent。