Error: Cannot match any routes. URL segment <route link>

Issue

I am new to angular and i’m learning about the routing in angular. Made a basic application having few components and tried the routing. But the thing is that the links are not recognized and error is coming at the console, tried to look internet but all seems fine to me.
Please tell me where I need to correct the code.enter image description here

app.routing-module.ts class:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { LoginComponentComponent } from './login-component/login-component.component';
import { RegistrationComponentComponent } from './registration-component/registration-component.component';
import { UsersComponentComponent } from './users-component/users-component.component';

const routes: Routes = [];

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

   routes: Routes  = [
    {path: '', redirectTo: 'home', pathMatch: 'full'},
    {path: 'home', component: AppComponent },
    {path: 'registration', component: RegistrationComponentComponent},
    {path: 'login', component: LoginComponentComponent},
    {path: 'users',component: UsersComponentComponent}
  ];
}

app-component.html elements:

<div class="container" style="background-color: grey;">
  <div class="row">
    <div class="col-md-12">
      <div class="card bg-dark my-5">
        <div class="card-body">
          <h2 class="card-title text-center text-white py-3">{{ title }}</h2>
          <ul class="text-center list-inline py-3">
            <li class="list-inline-item">
              <a routerLink="registration" class="btn btn-info">Registration</a>
                </li>
            <li class="list-inline-item">
              <a routerLink="login" class="btn btn-info">Login User</a>
                </li>
                <li class="list-inline-item">
                  <a routerLink="users" class="btn btn-info">Existing Users</a>
                    </li>
          </ul>
        </div>
      </div>
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

and app-module.ts class:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UsersComponentComponent } from './users-component/users-component.component';
import { RegistrationComponentComponent } from './registration-component/registration-component.component';
import { LoginComponentComponent } from './login-component/login-component.component';

@NgModule({
  declarations: [
    AppComponent,
    UsersComponentComponent,
    RegistrationComponentComponent,
    LoginComponentComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Solution

Move your routes array out of the module

instead of const routes = [];
put

  const routes: Routes  = [
    {path: '', redirectTo: 'home', pathMatch: 'full'},
    {path: 'home', component: AppComponent },
    {path: 'registration', component: RegistrationComponentComponent},
    {path: 'login', component: LoginComponentComponent},
    {path: 'users',component: UsersComponentComponent}
  ];

Answered By – Hassen Fadhlaoui

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.