Can I have more than one path which starts :id in the Angular route

Question

I am dealing with an error at the app-routing.module.ts

I have different routes with different component but instead they have the path not as string defined in module but as link and defined from outside. My problem is that if I use two {path: ":id"} then always it goes to the first component although i say to navigate to the second path.

I have user which accepts path: ":id". Pages which accepts path: ":id" and groups and other components.

My route it looks like this.

const routes: Routes = [
  { path: "", redirectTo: "login", pathMatch: "full" },
  { path: "login", component: LoginComponent },
  { path: "register", component: RegisterComponent },
  { path: "user/:id", component: OverviewComponent },
  { path: "cv", component: OverviewComponent },
  { path: "home", component: HomeComponent },
  { path: "jobs", component: JobsComponent },
  { path: "bookmarks", component: BookmarksComponent },
  { path: ":id/cv", component: OverviewComponent },

  { path: ":id", component: UserProfileComponent,
  children: [{
    path: "settings", component: UserSettingsComponent,
    children: [
      { path: "account", component: UserSettingsComponent },
      { path: "profile", component: UserSettingsComponent },
      { path: "information", component: UserSettingsComponent },
      { path: "privacy", component: UserSettingsComponent },
      { path: "followers", component: UserSettingsComponent },
      { path: "location", component: UserSettingsComponent },
      { path: "languages", component: UserSettingsComponent },
      { path: "stories", component: UserSettingsComponent },
      { path: "notifications", component: UserSettingsComponent },
      { path: "blocking", component: UserSettingsComponent },
      { path: "facerec", component: UserSettingsComponent },
      { path: "mobile", component: UserSettingsComponent },
      { path: "apps", component: UserSettingsComponent },
      { path: "games", component: UserSettingsComponent },
      { path: "business_integration", component: UserSettingsComponent },
      { path: "ads", component: UserSettingsComponent },
      { path: "ads_payment", component: UserSettingsComponent },
      { path: "support_inbox", component: UserSettingsComponent },
      { path: "videos", component: UserSettingsComponent }]
  }]
}
  { path: "branches", component: BranchesComponent },

  {
    path: "groups", component: GroupsComponent,
    children: [
      { path: "create", component: GroupsSidebarComponent },
    ]
  },
  {
    path: "pages", component: PagesComponent,
    children: [
      { path: "info", component: PagesComponent },
      { path: "details", component: PagesComponent },
      { path: "creation", component: CreatePageComponent },
    ]
  },
  {
    path: ":id", component: PageDetailsComponent, 
    children: [
      { path: "locations", component: PageDetailsComponent },
      { path: 'info', component: PageDetailsComponent },
      { path: "details", component: PageDetailsComponent },
      { path: "language", component: PageDetailsComponent },
      { path: "creation", component: PageDetailsComponent },
      { path: "language", component: PageDetailsComponent },
      { path: "about", component: PageDetailsComponent },
      { path: "feed", component: PageDetailsComponent},
      { path: "manage_shop", component: PageDetailsComponent},
      { path: "inbox", component: PageDetailsComponent},
      { path: "app_store", component: PageDetailsComponent},
      { path: "tools", component: PageDetailsComponent},
      { path: "manage_jobs", component: PageDetailsComponent},
      { path: "notifications", component: PageDetailsComponent},
      { path: "insights", component: PageDetailsComponent},
      { path: "publishing_tools", component: PageDetailsComponent},
      { path: "ad_center", component: PageDetailsComponent},
      { path: "page_quality", component: PageDetailsComponent}
    ]
  },

  {path: "groups/:id", component: GroupDetailsComponent,
    children: [
    {path:"about", component: GroupDetailsComponent},
    {path:"manage", component: GroupDetailsComponent},
    {path:"member-requests", component: GroupDetailsComponent},
    {path:"auto_approve_requests", component: GroupDetailsComponent},
    {path:"membership_questions", component:GroupDetailsComponent},
    {path:"pending_posts", component:GroupDetailsComponent},
    {path:"post_tags_list", component:GroupDetailsComponent},
    {path:"scheduled_posts", component: GroupDetailsComponent},
    {path:"admin_activities", component: GroupDetailsComponent},
    {path:"manage_rules", component:GroupDetailsComponent},
    {path:"member_reported_content", component: GroupDetailsComponent},
    {path:"alerted", component: GroupDetailsComponent},
    {path:"group_quality", component:GroupDetailsComponent},
    {path:"settings", component: GroupDetailsComponent,
      children: [
        {path:"about", component: GroupDetailsComponent},
        {path:"customize", component: GroupDetailsComponent},
        {path:"features", component: GroupDetailsComponent},
        {path:"membership", component: GroupDetailsComponent},
        {path:"discussion", component: GroupDetailsComponent},
        {path:"advanced", component: GroupDetailsComponent}

      ]
    }
  ]},

  {
    path: "page/:id", component: PagesSettingsComponent,
    children: [
      { path: "settings", component: PagesSettingsComponent,
      children: [
        {path:"messaging", component: PagesSettingsComponent},
        {path:"page_info", component: PagesSettingsComponent},
        {path:"tabs", component: PagesSettingsComponent},
        {path:"notifications", component: PagesSettingsComponent},
        {path:"page_roles", component: PagesSettingsComponent},
        {path:"people_and_tags", component: PagesSettingsComponent},
        {path:"preferred_audience", component: PagesSettingsComponent},
        {path:"payments", component: PagesSettingsComponent},
        {path:"page_management_history", component: PagesSettingsComponent},
        {path:"allactivity", component: PagesSettingsComponent}

      ] },
    ]
  },



];

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

And this is when the user use click event to go in the route

  goToWeb(id) {
    this.showWeb = true;
    this.pageService.getPage(id).subscribe(data => {
      this.page = data;
      if(this.page.pageUrl) {
      this.router.navigate(['', this.page.pageUrl]);
      } else {
       this.router.navigate(['', this.page._id]);
      }
    })
    this.pageID = id;
    this.pageService.changeMessage(id);
    this.sendPageData.send(this.page);
  }

And this is when user tries to go to his/her profile.

  <button type="button" class="button-f button-sc" [routerLink]="userUrl"></button>     

 if (this.model.userUrl) {
      this.userUrl = this.model.userUrl;
    } else {
      this.userUrl = this.model.user;

    }

Answer 1

My problem is that if I use two {path: ":id"} then always it goes to the first component although i say to navigate to the second path.

That's how angular routing is supposed to behave.

Honestly, that routing file is too cluttered. Consider using sub-modules and sub-module routing https://angular.io/guide/ngmodules

Consider simpler approaches. Instead of routing

{path: ":id/abc"},
{path: ":id/xyz"},

route them as

{path: "abc/:id"},
{path: "xyz/:id"},

Consider Feature Modules https://angular.io/guide/feature-modules

Update:

If you really insist on having :id before string ...

Routing:

{ path: ":id", component: ContainerComponent, children: [
    { path: ":id/abc", component: AbcComponent },
    { path: ":id/xyz", component: XyzComponent },
    ...
] },

ContainerComponent HTML:

<router-outlet></router-outlet>

ContainerComponent TS:

constructor(private route:ActivatedRoute, private router: Router)

ngOnInit: void {
    const id = this.route.snapshot.params.id
    if ( *your condition check on id* ) this.router.navigate([*anywhere else*])
}

Update:

Made a super component which would check the parameter and activate the needed component.

Stackblitz