Angular loads two components simultaneously

Question

I have an application which uses angular2 for frontend part. Sometimes i got pretty strange bug: after login to the application i see two components simultaneously(login component and main component).

So, in the above screenshot, inputs for login functionality should not been seen.

It's the html code of the provided page.
Below i listed the content of app.component.html:

<form name="header" class="form-horizontal" >
<div class="navbar-fixed-top cometflowHeader">
    <label>CometFlow</label>
</div>
</form>

<div class="jumbotron" style="background-color: #fff; border: 3px; border-color: black;">
    <div class="classol-sm-12">
        <router-outlet></router-outlet>
    </div>
</div>

And the routing configuration:

const appRoutes: Routes = [
  {path: 'login', component: LoginComponent},
  {path: '', component: HomeComponent, canActivate: [AuthGuard], pathMatch: 'full'},

  // otherwise redirect to home
  {path: '**', redirectTo: ''}
];

export const routing = RouterModule.forRoot(appRoutes, {useHash: true});

@NgModule({
  imports: [
      ...,
      routing
  ],
  bootstrap: [AppComponent]
})

Can somebody give me direction where should i look for the problem? Because right now i don't have a clue why is this happen. I don't see any errors in browser's console.

I had the same issue but right now don't remember what was the exact issue with my code. But somewhere the 2nd component was being called. double check your code to see where your 2nd component is coming from. — WasiF, Apr 10 '18 at 11:57
do debugging, use `debugger` in typescript somewhere in your method or in your suspicious code to debug where you think the error may be coming from — WasiF, Apr 10 '18 at 11:58
Is your 1st component calling the 2nd component inside it. When you call 1st, it automatically calls the 2nd. — WasiF, Apr 10 '18 at 12:00
@WASIF, i'm not sure that this is related to additional call of my component. Because application behaves like this not every time. This happens maybe in 1%. And if i press on `SMS Campaign` link on my page, i will see third component on the same page. And after pressing something on third component, i would see fourth component along with previous three. — iChrome, Apr 10 '18 at 12:07

score 0 · Answer 1 · answered Apr 10 '18 at 12:16

I believe your routing is incorrect. HomeComponent should be AppComponents child, right?

I believe it should go like this:

const appRoutes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: '',
    component: AppComponent,
    children: [
      {
        path: '',
        component: HomeComponent,
        canActivate: [AuthGuard],
        pathMatch: 'full'
      },

      // otherwise redirect to home
      { path: '**', redirectTo: '' }
    ]
  }
];

Or like this:

const appRoutes: Routes = [
  {
    path: '',
    component: AppComponent,
    children: [
      {
        path: '',
        component: HomeComponent,
        canActivate: [AuthGuard],
        pathMatch: 'full'
      },
      {
        path: 'login',
        component: LoginComponent
      },
      // otherwise redirect to home
      { path: '**', redirectTo: '' }
    ]
  }
];

Your <router-outlet></router-outlet> should be an outlet for which components?

score 0 · Accepted Answer · answered Apr 11 '18 at 11:50

0

I found solution for my problem here
In a few words: there was a bug with BrowserAnimationsModule. I upgraded the version of Angular, and after that this visual defect disappeared.

answered Apr 11 '18 at 11:50

iChrome

443
1
6
24

Angular loads two components simultaneously

2 Answers2