Routing edit/id in asp.net core application with angular not working

Question

I am learning building application using angular and asp.net core using these videos on this link. Everything works fine except the edit of a component. If I give a URL like below, it goes to the route for error in app-routing.module.ts even though there's no error in the browser console log.

http://localhost:4200/genres/edit/1

The app-routing.model.ts is as below

          import { Component, NgModule } from '@angular/core';
      import { RouterModule, Routes } from '@angular/router';
      import { CreateActorComponent } from './actors/create-actor/create-actor.component';
      import { EditActorComponent } from './actors/edit-actor/edit-actor.component';
      import { IndexActorsComponent } from './actors/index-actors/index-actors.component';
      import { CreateGenreComponent } from './genres/create-genre/create-genre.component';
      import { EditGenreComponent } from './genres/edit-genre/edit-genre.component';
      import { IndexGenresComponent } from './genres/index-genres/index-genres.component';
      import { HomeComponent } from './home/home.component';
      import { CreateMovieTheaterComponent } from './movie-theaters/create-movie-theater/create-movie-theater.component';
      import { EditMovieTheaterComponent } from './movie-theaters/edit-movie-theater/edit-movie-theater.component';
      import { IndexMovieTheaterComponent } from './movie-theaters/index-movie-theater/index-movie-theater.component';
      import { CreateMovieComponent } from './movies/create-movie/create-movie.component';
      import { EditMovieComponent } from './movies/edit-movie/edit-movie.component';

      const routes: Routes = [
        {path:' ', component:HomeComponent},
        {path:'genres', component:IndexGenresComponent},
        {path:'genres/create', component:CreateGenreComponent},
        {path:'genres/edit:id', component:EditGenreComponent},
        {path:'actors', component:IndexActorsComponent},
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
        {path:'actors/create', component:CreateActorComponent},
        {path:'actors/edit:id', component:EditActorComponent},
        {path:'movietheaters', component:IndexMovieTheaterComponent},
        {path:'movietheaters/create', component:CreateMovieTheaterComponent},
        {path:'movietheaters/edit:id', component:EditMovieTheaterComponent},

        {path:'movies/create', component:CreateMovieComponent},
        {path:'movies/edit:id', component:EditMovieComponent},
        // {path:'**',component:HomeComponent}
        {path:'**',redirectTo:' '}


      ];

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

edit-genre.component.ts is

    import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { genreCreationDTO } from '../genres.model';

@Component({
  selector: 'app-edit-genre',
  templateUrl: './edit-genre.component.html',
  styleUrls: ['./edit-genre.component.css']
})
export class EditGenreComponent implements OnInit {

  constructor(private activatedRoute:ActivatedRoute) { }
  
  model: genreCreationDTO={name:"Drama"};
  ngOnInit(): void {
    this.activatedRoute.params.subscribe(params=>{
      
    });
  }
//Event emiited value passed from child form-genre-creation to parent create-genre.component
  //to be displayed
  saveChanges(genreCreationDTO:genreCreationDTO)
    {
    }

}

edit-genre.component.html is

        <h2>Edit Genre</h2>
    <app-form-genre [model]="model" (onSaveChanges)="saveChanges($event)"></app-form-genre>

form-genre.component.html is

<form (submit)="saveChanges()" [formGroup]="form">

<mat-form-field appearance="outline">
    <mat-label>Name*</mat-label>
    <input matInput formControlName="name">
    <mat-error *ngIf="form.invalid">{{getErrorMessageFieldName()}}</mat-error>
       
  </mat-form-field>

<div>
    <button mat-flat-button color="primary" [disabled]="form.invalid">Save Changes</button>
    <a mat-stroked-button routerLink="/genres">Cancel</a>
</div>

form-genre.component.ts is

    import { Component, OnInit, Output,EventEmitter, Input } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { firstLetterUppercase } from 'src/app/validators/firstLetterUppercase';
import { genreCreationDTO } from '../genres.model';

@Component({
  selector: 'app-form-genre',
  templateUrl: './form-genre.component.html',
  styleUrls: ['./form-genre.component.css']
})
export class FormGenreComponent implements OnInit {
  
  constructor(private router: Router, private formBuilder:FormBuilder) { }

  @Input()
  model!: genreCreationDTO;
  //Event Emitter
  @Output()
  onSaveChanges: EventEmitter<genreCreationDTO>=new EventEmitter<genreCreationDTO>();

  form!: FormGroup;
  ngOnInit(): void {
    this.form= this.formBuilder.group({
      name:['',[Validators.required, Validators.minLength(3),firstLetterUppercase()]]
    });
    if(this.model!==undefined){
      this.form.patchValue(this.model);
    }

  }


  getErrorMessageFieldName()
  {
    const field= this.form.get("name");
    if(field?.hasError("required"))
    {
      return "The name field is required";
    }
    if(field?.hasError("minLength")){
    return "The minimum length is 3"
    }
    if(field?.hasError('firstLetterUppercase')){
    return field.getError('firstLetterUppercase').message;
    }
    return '';
  }

  saveChanges()
  {

    //Emit value from child form-genre.compnent to parent create-genre.component
    this.onSaveChanges.emit(this.form.value);
  // this.router.navigate(['/genres']);
  }

}

I am new to .net core framework & angular and i'm using forms(chapter sharing forms) in the video tutorial by Felipe galivan. Everytime I give an edit/id url for a component, it keeps using this

{path:'**',redirectTo:' '}

in the app-routing.module.ts as if say genres/edit/id has no match. I'm doing exactly as Felipe in the video, mine keeps redirecting me to home page instead of genres/edit. Why is this happening?