2

So i have an angular4 app using import {RouterModule, Routes } from '@angular/router'

my routes config is set up like that : 

const appRoutes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full',canActivate: [AuthGuard]},
  {path:'login', component:LoginComponent},  
  {path:'home', component:HomeComponent, canActivate: [AuthGuard]},  
  {path:'profile', component:UserProfileComponent, canActivate: [AuthGuard] },
  {path:'record', component:RecordComponent, canActivate: [AuthGuard]},
]

in my navigation bar html im using 

<ul class="navbar-nav ml-auto">
            <li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}">
                <a [routerLink]="['/home']" class="nav-link"><i class="fas fa-home fa-2x"></i></a>
            </li>
            <li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}">
                <a [routerLink]="['/profile']" class="nav-link"><i class="fas fa-user fa-2x"></i></a>
            </li>
        </ul>

to route between my pages. The problem is, every time i click on a link in the nav-bar, the new page does appear, but it is on top of the previous one, i mean if i scroll down i can see the previous page (But the navbar is not duplicated)

not sure if this is relevent but i'm using <router-outlet> inside my app-component.html

KLTR
  • 1,263
  • 2
  • 14
  • 37
  • 2
    Sounds like you're getting errors from your browser. Open developer console (F12 with chrome) to see what's causing it. – Z. Bagley Jan 11 '18 at 21:44
  • 1
    Can you show us the templates that contain router outlets? – ConnorsFan Jan 11 '18 at 21:45
  • @Z.Bagley Yep that was the problem .. can you explain to me why does this happen ? i mean why does an error causes this effect ? – KLTR Jan 11 '18 at 21:48
  • 1
    Take a look at [this post](https://stackoverflow.com/q/45762690/1009922). One of the answers refers to [this issue](https://github.com/angular/angular/issues/19093) and to [this other one](https://github.com/angular/angular/issues/19273). – ConnorsFan Jan 11 '18 at 21:52
  • 1
    The Angular Compiler doesn't actually know what the DOM is going to look like before it renders it, and if a link opens DOM that is faulty it attempts to build the DOM for the new component and fails partway through. Lots of times the compiler will stop running and you can't route through a lot of your app after this happens, other times multiple router outlets appears, other times the screen turns white... just one of the signs you've written code to break something ;) – Z. Bagley Jan 11 '18 at 21:53

2 Answers2

0

An error can causes the break of displaying one component in a router-outlet, try check if there are errors in the console javascript when switching from one link to the other

mth khaled
  • 337
  • 4
  • 13
0

This is because you have placed login html in app.component.html. replaces the template of the current route, except that all the html in this file is constant.

You can create a separate login component. By default navigate to login component. Donot keep login html in app.component.html

i have describe login component is one example here..

Chirag Patel
  • 373
  • 5
  • 20