Having issue with router in angular 2

Question

I have a navigation bar like Dashboard, Customers, Product after user logs into the system. This is how I have set up my routes file.

app.routing.ts

export const router: Routes = [
{
    path: '',
    redirectTo: 'admin',
    pathMatch: 'full',
    canActivate: [AuthGuard],
},
{
    path: 'admin',
    component: AdminComponent,
    canActivateChild: [AuthGuard],
    children: [
        {
            path: 'customer',
            component: CustomerComponent
        },
        {
            path: 'product',
            component: ProductComponent
        },
        {
            path: '',
            component: DashboardComponent
        }
    ]
},
{ path: 'login', component: LoginComponent }
];

export const routes: ModuleWithProviders = RouterModule.forRoot(router);

My app.component.html file as base file. Have not included app.component.ts file here, it contains export class and templateUrl

<router-outlet></router-outlet>

My admin-dashboard.component.ts file

@Component({
selector: 'app-admin',
template: `
    <div class="wrapper">
        <!-- Start of the navigation bar -->
        <app-navbar></app-navbar>
        <!-- END NAVIGATION -->
          <div class="customer-panel">
            <router-outlet></router-outlet>
          </div><!-- End of the customer panel -->

    </div><!-- /end wrapper -->
`
 })
 export class AdminComponent implements OnInit {}

And here is the navbar.component.html file

<div class="collapse navbar-collapse" id="navigate">
          <ul class="nav navbar-nav">
            <li><a routerLink="" routerLinkActive="active">Dashboard</a></li>
            <li><a routerLink="customer" routerLinkActive="active">Customers</a></li>
            <li><a routerLink="product" routerLinkActive="active">Products</a></li>
            <li><a routerLink="user">User</a></li>
            <li><a href="product-transactions.html">Transactions</a></li>
            <li><a href="#">Reports</a></li>
          </ul>
        </div>

So, what I have done is my app loads app.component.html file which contains router-outlet. Which then loads admin.component.html file and I have loaded the other navigation bar links as children of admin.component.ts file with router-outlet here as well. It is working well but routerLinkActive is not working as Dashboard link is always active here. So, is my route design fine? Suggestions please.

ranakrunal9 ranakrunal9 · Accepted Answer · 2016-12-15T12:02:16

I think you need to include routerLinkActiveOptions for your dashboard link as below :

 <li><a routerLink="" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Dashboard</li>

Having issue with router in angular 2

1 Answers