title: Error: Cannot match any routes. URL segment <route link>
body: <p>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.<a href="https://i.stack.imgur.com/l8P4e.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l8P4e.jpg" alt="enter image description here" /></a></p>
  <p>app.routing-module.ts class:</p>
  <pre><code>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}
    ];
  }
  </code></pre>
  <p>app-component.html elements:</p>
  <pre><code>&lt;div class=&quot;container&quot; style=&quot;background-color: grey;&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-md-12&quot;&gt;
        &lt;div class=&quot;card bg-dark my-5&quot;&gt;
          &lt;div class=&quot;card-body&quot;&gt;
            &lt;h2 class=&quot;card-title text-center text-white py-3&quot;&gt;{{ title }}&lt;/h2&gt;
            &lt;ul class=&quot;text-center list-inline py-3&quot;&gt;
              &lt;li class=&quot;list-inline-item&quot;&gt;
                &lt;a routerLink=&quot;registration&quot; class=&quot;btn btn-info&quot;&gt;Registration&lt;/a&gt;
                  &lt;/li&gt;
              &lt;li class=&quot;list-inline-item&quot;&gt;
                &lt;a routerLink=&quot;login&quot; class=&quot;btn btn-info&quot;&gt;Login User&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class=&quot;list-inline-item&quot;&gt;
                    &lt;a routerLink=&quot;users&quot; class=&quot;btn btn-info&quot;&gt;Existing Users&lt;/a&gt;
                      &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  </code></pre>
  <p>and app-module.ts class:</p>
  <pre><code>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 { }
  </code></pre>