Error: Cannot match any routes. URL Segment: in angular9

Question

i use angular9+ version ,I give all paths in my router module but i get this type of error core.js:6228 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'mystore.component' Error: Cannot match any routes. URL Segment: 'mystore.component' at ApplyRedirects.noMatchError (router.js:4396) at CatchSubscriber.selector (router.js:4360) at CatchSubscriber.error (catchError.js:29) at MapSubscriber._error (Subscriber.js:75) at MapSubscriber.error (Subscriber.js:55) at MapSubscriber._error (Subscriber.js:75) at MapSubscriber.error (Subscriber.js:55) at MapSubscriber._error (Subscriber.js:75) at MapSubscriber.error (Subscriber.js:55) at ThrowIfEmptySubscriber._error (Subscriber.js:75) at resolvePromise (zone-evergreen.js:798) at resolvePromise (zone-evergreen.js:750) at zone-evergreen.js:860 at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Object.onInvokeTask (core.js:41632) at ZoneDelegate.invokeTask (zone-evergreen.js:398) at Zone.runTask (zone-evergreen.js:167) at drainMicroTaskQueue (zone-evergreen.js:569) at ZoneTask.invokeTask [as invoke] (zone-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 { }

Michael D Michael D · Accepted Answer · 2020-06-16T06:41:02

You're redirecting to mystore and yet there isn't any mystore path defined. Also in the component template you're referring it to as mystore.component instead. You need to settle on a single path name. Try the following

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

Error: Cannot match any routes. URL Segment: in angular9

2 Answers