LoginComponent loading twice at route '/'

Question

I am trying to load login page, but it is loading twice

const routes: Routes = [
  { path: "", redirectTo: "login", pathMatch: "full" },
  { path: "login", component: LoginComponent },
  {
    path: "customer",
    component: MainComponent,
    children: [
      {
        path: "",
        redirectTo: "create",
        pathMatch: "full"
      },
      {
        path: "create",
        component: ContentComponent
      },
      {
        path: "lookup",
        component: LookupComponent
      },
      {
        path: "report",
        component: DatagridComponent
      }
    ]
  }
];

app.component.html

<app-login></app-login>
<router-outlet></router-outlet>

login.component.ts

 login() {
    this.router.navigate(['/customer']);
  }

Aftr login, it is redirecting to customer page. But default login page is loading twice.

Answer 1

Remove:

<app-login></app-login> -- remove this
<router-outlet></router-outlet>

your loading the same component twice.. You once call it with router-outlet and once when u post the app-login label

use :

<router-outlet></router-outlet>

only