Getting error Cannot match any routes. URL Segment: 'home'

Question

I am getting an error message as follows:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'home' Error: Cannot match any routes. URL Segment: 'home' at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:2469) at CatchSubscriber.selector (router.js:2450) at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60) at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61) at resolvePromise (zone.js:831) at resolvePromise (zone.js:788) at zone.js:892 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423) at Object.onInvokeTask (core.js:17290) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195) at drainMicroTaskQueue (zone.js:601)

app.component.html

<div id="container">
  <div class="my-custom-container" [style.margin-top.px]="routerOutput">
  <router-outlet></router-outlet>
  </div>
</div>

nav.component.html

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<nav #navbar class="navbar fixed-top navbar-expand-md navbar-dark bg-dark">
    <div class="container">
    <a class="navbar-brand">Kumo Store</a>    

      <ul class="navbar-nav mr-auto">
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link waves-light" [routerLink]="['']" mdbWavesEffect>Home</a>
        </li>
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link waves-light" [routerLink]="['/log-in']" mdbWavesEffect>Login</a>
        </li>
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link waves-light" [routerLink]="['/sign-up']" mdbWavesEffect>Register</a>
        </li>
        <li class="nav-item" routerLinkActive="active">
            <a class="nav-link waves-light" [routerLink]="['/order']" mdbWavesEffect>Order</a>
          </li>
        <li class="nav-item" routerLinkActive="active">
            <a class="nav-link waves-light" [routerLink]="['/cart']" mdbWavesEffect>Cart</a>
          </li>
         <li class="nav-item" routerLinkActive="active" style="float:right" *ngIf="role == '2'" >
            <a class="nav-link waves-light" [routerLink]="['/store']" mdbWavesEffect>Store</a>
        </li>
        <li class="nav-item" routerLinkActive="active" style="float:right" *ngIf="role == '1'" >
          <a class="nav-link waves-light" [routerLink]="['/profile']" mdbWavesEffect>Profile</a>
      </li>
      </ul>
    </div>
  </nav>

Here is my routes.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { SignUpComponent } from './sign-up/sign-up.component';
import { LogInComponent } from './log-in/log-in.component';
import { ProductComponent } from './product/product.component';
import { CartComponent } from './cart/cart.component';
import { OrderComponent } from './order/order.component';
import { CheckoutComponent } from './checkout/checkout.component';
import { LogoutComponent } from './logout/logout.component';
import { AdminComponent } from './admin/admin.component';
import { AdminLoginComponent } from './admin-login/admin-login.component';
import { StoreComponent } from './store/store.component';
import { ProfileComponent } from './profile/profile.component';
import { AddCartComponent } from './add-cart/add-cart.component';
import { EditCartComponent } from './edit-cart/edit-cart.component';
import { FinanceChartComponent } from './finance-chart/finance-chart.component';

export const appRoutes: Routes = [
  {
    path: '', 
    children: [
      { path: '', component: HomeComponent},
      { path: 'sign-up', component: SignUpComponent},
      { path: 'log-in', component: LogInComponent},
      { path: 'order', component: OrderComponent},
      { path: 'cart', component: CartComponent},
      { path: 'product', component: ProductComponent},
      { path: 'admin', component: AdminComponent},
      { path: 'checkout', component: CheckoutComponent},
      { path: 'logout', component: LogoutComponent},
      { path: 'profile', component: ProfileComponent},
      { path: 'store', component: StoreComponent},
      { path: 'admin/login', component: AdminLoginComponent},
      { path: 'add-cart', component: AddCartComponent },
      { path: 'edit-cart', component: EditCartComponent },
      { path: 'finance-chart', component: FinanceChartComponent }
    ]
  },
  { path: '', redirectTo: '', pathMatch: 'full'},
]; 



//export class AppRoutingModule { }

Please notice how my navbar looks like, the Home tab is still pressed and I am not on home component. How could I fix this issue, did I setup routes.ts incorrectly? Here is the picture:

Do a: [routerLink]="['home']" in your html, for your routes, do a: { path: 'home', component: HomeComponent}, — dnunez32
Can you specify more specifically, I do not know where to put it, replace with what? — Alejandro H
Ok, it works, but wouldnt home be more legit if it was just localhost:4200? — Alejandro H

Plochie Plochie · Accepted Answer · 2020-01-12T06:41:39

To redirect localhost:4200 to home, you can have following configuration in routes,

export const appRoutes: Routes = [
  {
    path: '', 
    children: [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      { path: 'home', component: HomeComponent},
   ...
]

Getting error Cannot match any routes. URL Segment: 'home'

1 Answers