Ошибка: не удается сопоставить ни один маршрут.Сегмент URL: «% 23»

Question

Я работаю с angular 7 и .NET Mvc и PostgreSQL в качестве базы данных. При нажатии кнопки «Добавить» для добавления данных в мою базу данных появляется эта ошибка. Ошибка: не удается сопоставить никакие маршруты.Сегмент URL: '% 23'

Проблема в компоненте роли

app.Module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {
  NgbDateStruct, NgbCalendar, NgbCalendarIslamicUmalqura, NgbDatepickerI18n
} from '@ng-bootstrap/ng-bootstrap';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { ToastrModule } from 'ngx-toastr';
import { NgxTreeDndModule } from 'ngx-tree-dnd';
import { FileDropModule } from 'ngx-file-drop';
import { TreeviewModule } from 'ngx-treeview';
import { NgbModal, NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
import { AppComponent } from './app.component';
import { RolesComponent } from './roles/roles.component';
import { RolesComponent } from './roles/roles.component';
import { RoleDetailService } from './shared/role-detail.service';

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    HomeComponent,
    CounterComponent,
    FetchDataComponent,
    RolesComponent,
    EssayeTreeComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    CKEditorModule,
    NgxTreeDndModule,
    BrowserAnimationsModule, // required animations module
    ToastrModule.forRoot(), // ToastrModule added

    FileDropModule,
    NgbModule.forRoot(),
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'counter', component: CounterComponent },
      { path: 'fetch-data', component: FetchDataComponent },
      { path: 'dashboard', component: DashboardComponent },
      { path: 'roles', component: RolesComponent },

    ]),
    MatTreeModule,
    MatIconModule,
    MatButtonModule
  ],
  providers: [UserDetailService,
    TypetransactionDetailService,
    MethodeLivraisonDetailService,
    ProcessusDetailService,
    RoleDetailService],
  bootstrap: [AppComponent]
})
export class AppModule { }

RoleController:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using AdministativeCommunication.Models;

namespace AdministativeCommunication.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class RolesController : ControllerBase
    {
        private readonly ApiContext _context;

        public RolesController(ApiContext context)
        {
            _context = context;
        }

        // GET: api/Roles
        [HttpGet]
        public async Task<ActionResult<IEnumerable<Role>>> Getroles()
        {
            return await _context.roles.ToListAsync();
        }

        // GET: api/Roles/5
        [HttpGet("{id}")]
        public async Task<ActionResult<Role>> GetRole(int id)
        {
            var role = await _context.roles.FindAsync(id);

            if (role == null)
            {
                return NotFound();
            }

            return role;
        }

        // PUT: api/Roles/5
        [HttpPut("{id}")]
        public async Task<IActionResult> PutRole(int id, Role role)
        {
            if (id != role.Id)
            {
                return BadRequest();
            }

            _context.Entry(role).State = EntityState.Modified;

            try
            {
                await _context.SaveChangesAsync();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!RoleExists(id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }

            return NoContent();
        }

        // POST: api/Roles
        [HttpPost]
        public async Task<ActionResult<Role>> PostRole(Role role)
        {
            _context.roles.Add(role);
            await _context.SaveChangesAsync();

            return CreatedAtAction("GetRole", new { id = role.Id }, role);
        }

        // DELETE: api/Roles/5
        [HttpDelete("{id}")]
        public async Task<ActionResult<Role>> DeleteRole(int id)
        {
            var role = await _context.roles.FindAsync(id);
            if (role == null)
            {
                return NotFound();
            }

            _context.roles.Remove(role);
            await _context.SaveChangesAsync();

            return role;
        }

        private bool RoleExists(int id)
        {
            return _context.roles.Any(e => e.Id == id);
        }
    }
}

Role.service

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { RoleDetail } from './role-detail.model';


@Injectable({
  providedIn: 'root'
})
export class RoleDetailService {
  formData: RoleDetail;
  headers = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    })
  }
  readonly rootURL = 'http://localhost:53847/api';

  constructor(private http: HttpClient) { }
  postRole(formDat: RoleDetail) {
    return this.http.post(this.rootURL + '/Roles', this.formData, this.headers);
  }
}

Role.Model

export class RoleDetail {
  Id: number;
  DescriptionL: string;
  ShortNameL: string;
}

RoleComponent.html

<form #form="ngForm" autocomplete="off" (submit)="onSubmit(form)">
  <input type="hidden" name="Id" [value]="service.formData.Id" />



    <label>Description</label>

      <input type="text" name="DescriptionL" #DescriptionL="ngModel" [(ngModel)]="service.formData.DescriptionL" required />




    <label>short name</label>
    <div class="input-group">
      <input type="text" name="ShortNameL" #ShortNameL="ngModel" [(ngModel)]="service.formData.ShortNameL" required />
    </div>

  <button type="button" class="btn btn-primary">موافق</button>


</form>

RoleComponenet.ts

import { Component, OnInit } from '@angular/core';
import { RoleDetailService } from '../shared/role-detail.service';
import { NgForm } from '@angular/forms';

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

  constructor(private service: RoleDetailService) { }

  ngOnInit() {
    this.resetForm();
  }
  resetForm(form?: NgForm) {
    if (form != null)
      form.resetForm();
    this.service.formData = {
      Id: 44,
      DescriptionL: '',
      ShortNameL:'',
    }
  }
  onSubmit(form: NgForm) {
    this.service.postRole(form.value).subscribe(
      res => {
        this.resetForm(form);
      },
      err => {
        console.log(err);

      }
    )
  }
}

Answer 1

Проблема была в моем side-barComponent.html:

      <li class="treeview">
    <a routerLink="#">     //this is the problem
      <i class="fa fa-gears"></i>
      <span>Settings</span>
      <i class="fa fa-angle-left pull-left"></i>
    </a>
    <ul class="treeview-menu">
      <li><a routerLink="/Role"><i class="fa fa-circle-o"></i>Roles</a></li>

  </li>

Вместо <a routerLink="/type-transaction"> Я поставил <a href="#">