CODEWITHSUNDEEP
angularcomponents
Alex A.
Alex A.

Reputation: 2603

Bootstrap component is initialized twice in Angular app

My main component of the app looks like this:

@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);

  }

}

While everything works, this component is getting initialized twice. enter image description here

I think that this is caused by the fact that there is a route defined for this component as well as it is a bootstrap component:

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 {
}

And I did validate it by removing this route. However, I do need to close the component behind the login. As you can see, I am using canActivate for that, but if I remove the route, I have to use another mechanism for it. How can I achieve proper initialization of the app? Or am I on a wrong path in general?

Upvotes: 1

Views: 1591

Answers (2)

Julius
Julius

Reputation: 2864

Create a HomeComponent and route to that and leave the AppComponent for bootstrapping only.

Upvotes: 0

micronyks
micronyks

Reputation: 55443

The reason is,

In

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

and again through router, you are saying when route is '', please initiate AppComponent again.

Upvotes: 3

Related Questions