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

Question

Я использую версию angular9 +, я указываю все пути в моем модуле маршрутизатора, но я получаю ядро ​​ошибки этого типа. js: 6228 ERROR Ошибка: Uncaught (в обещании): Ошибка: не удается сопоставить ни один маршрут. Сегмент URL: "mystore.component" Ошибка: не удается сопоставить ни один маршрут. Сегмент URL: 'mystore.component' в ApplyRedirects.noMatchError (router. js: 4396) в CatchSubscriber.selector (router. js: 4360) в CatchSubscriber.error (catchError. js: 29) в MapSubscriber. _error (Подписчик. js: 75) на MapSubscriber.error (Подписчик. js: 55) на MapSubscriber._error (Подписчик. js: 75) на MapSubscriber.error (Подписчик. js: 55) на MapSubscriber._error (Subscriber. js: 75) в MapSubscriber.error (Subscriber. js: 55) в ThrowIfEmptySubscriber._error (Subscriber. js: 75) в resolvePromise (zone-evergreen. js: 798) ) в resolvePromise (зона-evergreen. js: 750) в зоне-evergreen. js: 860 в ZoneDelegate.invokeTask (зона-evergreen. js: 399) в Object.onInvokeTask (core. js: 41632) в ZoneDelegate.invokeTask (зона-evergreen. js: 398) в Zone.runTask (зона-evergreen. js: 167) в DrainMicroTaskQueue (зона-evergreen. js: 569) в ZoneTask.invokeTask [ as invoke] (зона-evergreen. js: 484)

mystore.component. html

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="la.jpg" alt="Los Angeles">
    </div>

    <div class="item">
      <img src="chicago.jpg" alt="Chicago">
    </div>

    <div class="item">
      <img src="ny.jpg" alt="New York">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

menu.component. html

<nav class="navbar navbar-expand-sm bg-success navbar-dark">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class=" nav-link"  routerLink="/mystore.component" routerLinkActive="active">MyStore</a>
    </li>
    <li class="nav-item">
      <a class=" nav-link"   routerLink="/admin.component" routerLinkActive="active">Admin</a>
    </li>
    <li class="nav-item">
      <a class=" nav-link"   routerLink="/users.component"  routerLinkActive="active">User</a>
    </li>
    <li class="nav-item">
      <div class="dropdown">
   <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
      Product
    </button> 
    <div class="dropdown-menu">
      <a class="dropdown-item" routerLink="#">Grosery</a>
      <a class="dropdown-item" routerLink="#">Vegetable</a>
      <a class="dropdown-item" routerLink="#">Cusmatic</a>
    </div>
  </div>
    </li>
  </ul>
</nav>

app.routeing.ts

  import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { AdminComponent } from './admin/admin.component';
    import { UsersComponent } from './users/users.component';
    import { MystoreComponent } from './mystore/mystore.component';

    const routes: Routes = [
        { path: '', redirectTo:'mystore',pathMatch: 'full'},
        { path: 'admin.component', component: AdminComponent },
        { path: 'users.component', component: UsersComponent }
    ];

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

Answer 1

Вы перенаправляетесь на mystore, но путь mystore не определен. Также в шаблоне компонента вы называете его mystore.component. Вам нужно выбрать одно имя пути. Попробуйте следующее

const routes: Routes = [
  { path: '', redirectTo:'mystore.component', pathMatch: 'full'},
  { path: 'admin.component', component: AdminComponent },
  { path: 'users.component', component: UsersComponent },
  { path: 'mystore.component', component: UsersComponent }
];