Angular routing confusion/strange behavior

Question

I have a base route with three sibling routes. The parent route routes to my task-list.component.ts which contains a navbar and router outlet.

I would like to have a route param on the base route where I can add an optional token

so when I navigate to http://localhost:4200 token should be undefined.

when I navigate to http://localhost:4200/123 token should be 123 in the activated route params

I have the below route config but i'm encountering confusing/strange behaviour.

When I navigate to http://localhost:4200 I get to my base taskList.component as expected.

When I try navigate to http://localhost:4200/123 I get a 404 not found? The expected bahaviour is that this should have navigated to taskList.component and added 123 to the activated route params...

even more strange when I click the deleted link in my navbar it navigates to the parent component app.component again only then I get "deleted" as the value in the activated route params...

Even more strange: when I navigate to http://localhost:4200 using my browser it doesn't set deleted as token instead I get a 404 not found again...

Any idea how I can achieve the above/what my issue might be?

my route module code:

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    
    import { AppComponent } from './app.component';
    import { TaskListComponent } from './task/task-list/task-list.component';
    import { CompletedTasksComponent } from './task/completed-tasks/completed-tasks.component';
    import { DeletedTasksComponent } from './task/deleted-tasks/deleted-tasks.component';
    
    
const routes: Routes = [  
  { path: '', component: TaskListComponent, pathMatch: 'full' },
  { path: 'completed', component: CompletedTasksComponent },
  { path: 'deleted', component: DeletedTasksComponent },
  { path: ':token', component: TaskListComponent },  
  { path: ':token/completed', component: CompletedTasksComponent },
  { path: ':token/deleted', component: DeletedTasksComponent }
];
    
    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }

app.component.html:

<nav mat-tab-nav-bar>
    <a mat-tab-link
    *ngFor="let link of links"
    [routerLink]="navigate(link)"
    (click)="activeLink = link"
    [active]="activeLink == link">{{link}}</a>
    

    </nav>


<router-outlet></router-outlet>

app.component.ts navigate method

navigate(link) {
    switch(link) {
      case 'Task List':
        return `${this.token}`;
      case 'Completed Tasks':
        return `${this.token}/completed`;
      case 'Deleted Tasks':
        return `${this.token}/deleted`;
    }
  }

Answer 1

Old answer: You have some issues in your routes. you can fix it like :

    RouterModule.forRoot([
      { path: "", component: TaskListComponent, pathMatch: "full" },
      { path: "deleted", component: DeletedTasksComponent },
      { path: ":id", component: TaskListComponent },
      { path: ":id/completed", component: CompletedTasksComponent },
      { path: ":id/deleted", component: DeletedTasksComponent }
    ])

Run It On Stackblitz

Update : based on your edit and comments, now in app navigation works but you get 404 when you refresh the page (even in development environment). so try this: https://stackoverflow.com/a/35285068/4718434 . (Also on production, you should configure your server to return angular html file on every path.)