Angular redirect me to the home page when I try to acces to another page/component

I'm making a Portfolio with Spring Boot and Angular. I have, in this web page, different sections like skills, experience, projects, education, etc. In each you can add or edit the info, but it requires that you enter to another page.Every time I try to enter to the page or component /nuevaskill for add a new one redirect me to the home page. The only form to create a new skill is enter to the URL directly o using phpmyadmin, and then I don't have any problem to edit the skill created. For make some changes to the portfolio you need to enter like an admin, but this isn't a problem. Here are the next files: model, service,components and templates from skills and new-skills, and the routing-module, and an image from the console that indicates the trace route.

      model: 
        skills.ts
        export class Skills{
            id?: number;
            nombreS: string;
            porcentaje: number;
        
            constructor(nombreS: string, porcentaje: number){
                this.nombreS=nombreS;
                this.porcentaje=porcentaje;
            }
        }

-------------------------------------------------------------------------------
    service
    s-skills.service.ts
    import { HttpClient } from "@angular/common/http";
    import { Injectable } from "@angular/core";
    import { Observable } from "rxjs";
    import { Skills } from "../model/skills";
    
    @Injectable({
        providedIn: 'root'
    })
    export class SSkillsService{
    skURL = "http://localhost:8080/skills/"
    
        constructor(private httpClient: HttpClient){}
    
        public lista():Observable<Skills[]>{
            return this.httpClient.get<Skills[]>(this.skURL + 'lista');
        }
    
        public detail(id: number):  Observable<Skills>{
            return this.httpClient.get<Skills>(this.skURL + `detail/${id}`);
        }
    
        public save(skills: Skills): Observable<any>{
            return this.httpClient.post<any>(this.skURL + 'create', skills);
        }
    
        public update(id: number, skills: Skills):Observable<any>{
            return this.httpClient.put<any>(this.skURL + `update/${id}`, skills);
        }
    
        public delete(id: number): Observable<any>{
            return this.httpClient.delete<any>(this.skURL + `delete/${id}`);
        }
    
    }

-------------------------------------------------------------------------------
    skills.component.ts
    import { Component, OnInit } from '@angular/core';
    import { Skills } from 'src/app/model/skills';
    import { SSkillsService } from 'src/app/services/s-skills.service';
    import { TokenService } from 'src/app/services/token.service';
    
    
    @Component({
      selector: 'app-skills',
      templateUrl: './skills.component.html',
      styleUrls: ['./skills.component.css']
    })
    export class SkillsComponent implements OnInit {
      skills: Skills[] = [];
    
      constructor(private sSkills: SSkillsService, private tokenService: TokenService) {
       }
    
      isLogged = false;
    
      ngOnInit(): void {
        this.cargarSkills();
        if(this.tokenService.getToken()){
          this.isLogged = true;
        } else {
          this.isLogged = false;
        }
      }
    
      cargarSkills():void{
        this.sSkills.lista().subscribe(data => {this.skills = data;})
      }
     
      delete(id?: number){
        if(id != undefined){
          this.sSkills.delete(id).subscribe(
            data => {
              this.cargarSkills();
            }, err => {
              alert("No se pudo borrar la skill");
            }
          );
        }
      }
    
    }

---------------------------------------------------------

    skills.component.html
        <section class="section_skills p-4">
            <div class="cont-start rounded-5" >
                
                <div class="d-flex justify-content-center">
                    <h1 class="title d-flex justify-content-center pt-5 pb-5">Skills</h1> 
                    <a href="#" class="title pt-4 ps-3">
                        <i class="bi bi-plus-circle-fill ps-3" routerLink="/nuevaskill" *ngIf="isLogged"></i>   
                    </a>
                </div>
               
                <div class="row">
                    <div class="col-sm-4 col-md-4 col-lg-4 text-center pb-5 circulo" *ngFor="let Skill of skills">
                        <circle-progress
                            [percent]="(Skill.porcentaje)"
                            [radius]="100"
                            [title]="(Skill.nombreS)"
                            [titleColor]="'white'"
                            [titleFontSize]="'2em'"
                            [showUnits]="false"
                            [showSubtitle]="false"
                            [outerStrokeWidth]="16"
                            [innerStrokeWidth]="6"
                            [outerStrokeColor]="'#0b6986'"
                            [innerStrokeColor]="'#9CD3D8'"
                            [animation]="true"
                            [animationDuration]="400"
                            [showBackground]="true"
                            [backgroundColor]="'white'"
                            [backgroundOpacity]="0.2"
                            class="pb-2"
                        ></circle-progress>   
                       
                        <div class="pb-3">
                            <td *ngIf="isLogged">
                                <button class="btn btn-light" routerLink="/editskill/{{Skill.id}}">
                                <i class="bi bi-pencil-fill"></i></button>
                            </td>
                            <td *ngIf="isLogged">
                                <button class="btn btn-danger" (click)="delete(Skill.id)">
                                    <i class="bi bi-trash-fill"></i>Borrar</button>
                            </td>    
                        </div>
                       
                    </div>
                    
                </div>
        
            </div>
        </section>
----------------------------------------------------

    new-skills.component.ts
    import { Component, OnInit } from '@angular/core';
    import { Router } from '@angular/router';
    import { Skills } from 'src/app/model/skills';
    import { SSkillsService } from 'src/app/services/s-skills.service';
    
    @Component({
      selector: 'app-new-skills',
      templateUrl: './new-skills.component.html',
      styleUrls: ['./new-skills.component.css']
    })
    export class NewSkillsComponent implements OnInit {
      nombreS: string;
      porcentaje: number;
    
      constructor(private sSkills: SSkillsService, private router: Router) {}
    
      ngOnInit(): void {
      }
    
      onCreate():void{
        const skill = new Skills(this.nombreS, this.porcentaje);
        this.sSkills.save(skill).subscribe(data => {
          alert("Skill añadida");
          this.router.navigate(['']);
        }, err =>{
          alert("La creación de una nueva skill falló");
          this.router.navigate(['']);
        })
      }
    
    }
--------------------------------------------------------------------------------------

    new-skills.component.html
    <div class="container">
        <div class="row">
            <div>
                <form (ngSubmit)="onCreate()" novalidate #f="ngForm" class="pb-3">
                    <h1 class="d-flex justify-content-center">Incorpore una nueva skill</h1>
                    <div class="form-group">
                        <label for="nombreS" class="text-white pt-2 pb-2">Nombre de la skill</label>
                        <input type="text" class="form-control" name="nombreS" id="nombreS" [(ngModel)]="nombreS" required>
                    </div>
                    <div class="form-group">
                        <label for="porcentaje" class="text-white pt-2 pb-2">Nivel de la skill en porcentaje</label>
                        <input type="number" class="form-control" name="porcentaje" id="porcentaje" [(ngModel)]="porcentaje" required>
                    </div>
                    <button class="btn btn-primary">
                        Agregar skill
                    </button>
                </form>
            </div>
        </div>
    </div>
-------------------------------------------------------------------------

    app-routing.module.ts
    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { EditAboutmeComponent } from './components/about-me/edit-aboutme.component';
    import { EditEducacionComponent } from './components/education/edit-educacion.component';
    import { NewEducacionComponent } from './components/education/new-educacion.component';
    import { EditExperienciaComponent } from './components/experience/edit-experiencia.component';
    import { NewExperienciaComponent } from './components/experience/new-experiencia.component';
    import { HomeComponent } from './components/home/home.component';
    import { LoginComponent } from './components/login/login.component';
    import { NotFoundComponent } from './components/not-found/not-found.component';
    import { EditProyectoComponent } from './components/projects/edit-proyecto.component';
    import { NewProyectoComponent } from './components/projects/new-proyecto.component';
    import { EditSkillsComponent } from './components/skills/edit-skills.component';
    import { NewSkillsComponent } from './components/skills/new-skills.component';
    
    
    const routes: Routes = [
      {path: 'login', component: LoginComponent},
      {path: 'nuevaexp', component: NewExperienciaComponent} ,
      {path: 'editexp/:id', component: EditExperienciaComponent},
      {path: 'nuevaeduc', component: NewEducacionComponent},
      {path: 'editeduc/:id', component: EditEducacionComponent},
      {path: 'nuevaproy', component: NewProyectoComponent},
      {path: 'editproy/:id', component: EditProyectoComponent},
      {path: 'editaboutme/:id', component: EditAboutmeComponent}, 
      {path: 'nuevaskill', component: NewSkillsComponent},
      {path: 'editskill/:id', component: EditSkillsComponent},
      {path: '', component: HomeComponent},
      {path: "**", component: NotFoundComponent}
    
    ];
    
    @NgModule({
      imports: [RouterModule.forRoot(routes, { enableTracing: true })],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }

Trace of the route indicated by the console