CODEWITHSUNDEEP
javascriptangularangular4-router
Joseph
Joseph

Reputation: 7775

Child Routing Not Working in Angular 4

I have problem with my child routing in Angular 4. It isn't working while the parent routing is working. When i hover over the "Create New Account", it still is on the Account. It shows localhost:4200/account. It must be localhost:4200/account/create-account. The Parent route is on app.component.ts while the child route is on the account.component.html

//sidebar.component.ts
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
    <li routerLinkActive="active" class="dropdown" appDropdown><a style="cursor: pointer;" routerLink="/account">Account</a>
        <ul class="dropdown-menu">
            <li><a style="cursor: pointer;">Create New Account</a></li>
            <li><a style="cursor: pointer;">View Account</a></li>
        </ul>
    </li>
    <li routerLinkActive="active"><a routerLink="/news">News</a></li>
</ul>


//app-routing.module.ts
import{ NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AccountComponent } from './account/account.component';
import { CreateAccountComponent } from './account/create-account/create-account.component';
import { ViewAccountComponent } from './account/view-account/view-account.component';
import { AccountStartComponent } from './account/account-start/account-start.component';
import { NewsComponent } from './news/news.component';

const appRoutes: Routes = [
    { path: '', redirectTo: '/account', pathMatch: 'full' },
    { path: 'account', component: AccountComponent, children: [
        { path: '', component: AccountStartComponent },
        { path: 'create-account', component: CreateAccountComponent },
        { path: 'view-account', component: ViewAccountComponent },
    ]},

    { path: 'news', component: NewsComponent }  
];



@NgModule({
    imports: [RouterModule.forRoot(appRoutes)],
    exports: [RouterModule]
})
export class AppRoutingModule {

}

//app.component.ts
<app-header></app-header>
<app-sidebar></app-sidebar>
<router-outlet></router-outlet>

//account.component.html
<div>
<router-outlet></router-outlet>
</div>

Upvotes: 0

Views: 1002

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222722

You need to configure the routerLink

 <li><a style="cursor: pointer;" routerLink="./create-account">Create New Account</a></li>

Upvotes: 1

Related Questions