Why route is not working in Angular with params?

There is a simple routing in Angular:

const routes: Routes = [
  {
    path: ':name', component: AppComponent,
    children: [
      { path: '1', component: Child1Component },
      { path: '2', component: Child2Component },
    ]
  },
  { path: '**', redirectTo: '/mur', pathMatch: 'full' }
]

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

The AppComponent contains:

<router-outlet></router-outlet><a href="#" (click)="goto()">Move</a>

Where goto() is:

goto() {
  this.router.navigate(["1"]);
}

First issue is I got content "Move" twice by link http://localhost:4200/mahmud

The second is when I click to I don't follow http://localhost:4200/mahmud/1 I just redirects back in http://localhost:4200/mahmud

The router.navigate accepts an array of commands. With the routing that you provided, to follow http://localhost:4200/mahmud/1 you need to go to /mahmud and then /1

With your code, will not go to the desired route since 1 is children of :id and not a main path.

goto() {
  this.router.navigate(["1"]);
}

Assuming mahmud represents an id, you need to go to mahmud then 1.

goto() {
  this.router.navigate(["mahmud", "1"]);
}

Hope this helps