CODEWITHSUNDEEP
angular
daniel waffner
daniel waffner

Reputation: 1

Cannot match any routes angular 13

I started learning angular and ran into a routing problem there are following routing modules in app-routing.module.ts:

  import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './p/home/home.component';

import { WorksComponent } from './p/works/works.component';
import { CenzorComponent } from './p/works/cenzor/cenzor.component';
import { UserlistComponent } from './p/works/userlist/userlist.component';
import { TasklistComponent } from './p/works/tasklist/tasklist.component';


const routes: Routes = [
  {path:'',redirectTo:'home',pathMatch:'full'},
{ path:'home',component: HomeComponent},
{ path:'',component: WorksComponent,children:[
  {path:'',redirectTo:'works',pathMatch:'full'},
  { path:'cenzor',component: CenzorComponent},
  { path:'userlist',component: UserlistComponent},
  { path:'tasklist',component: TasklistComponent},
] },

];

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

app.component.html

<app-header></app-header>
<router-outlet></router-outlet>

app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { HomeComponent } from './p/home/home.component';
import { WorksComponent } from './p/works/works.component';
import { CenzorComponent } from './p/works/cenzor/cenzor.component';
import { UserlistComponent } from './p/works/userlist/userlist.component';
import { TasklistComponent } from './p/works/tasklist/tasklist.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    HomeComponent,
    WorksComponent,
    CenzorComponent,
    UserlistComponent,
    TasklistComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

home.component.html

<div class="container-fluid d-flex justify-content-around">
    <div class="card" style="width: 18rem;">
        <img src="../../assets/images/1.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title text-danger text-center">list of prohibited words</h5>
       
          <a class="btn btn-success" routerLink="censor">censor</a>
        </div>
        
      </div>
      <div class="card" style="width: 18rem;">
        <img src="../../assets/images/2.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title text-danger text-center">angular task list</h5>
       
          <a class="btn btn-success" routerLink="tasklist">tasklist</a>
        </div>
      </div>
      <div class="card" style="width: 18rem;">
        <img src="../../assets/images/3.jpg" class="card-img-top" alt="...">
        <div class="card-body bg-light">
          <h5 class="card-title text-danger text-center">Angular users list</h5>
       
          <a  class="btn btn-success " routerLinkActive="active" routerLink="userlist">userlist</a>
        </div>
      </div>
</div>

I think there is problem with routes, because i get following error in console: ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'home/userlist'. Anyway i dont know how to handle this Thank You!

Upvotes: 0

Views: 638

Answers (2)

amir rad
amir rad

Reputation: 122

Fransisco explained well, and if I want to sum it up, first you should be careful about order of routes because Router uses a first-match wins strategy when matching routes, so more specific routes should be placed above less specific routes. Second probably need to use / before any paths in your html file like this: router link="/userlist".

Upvotes: 0

Francisco Santorelli
Francisco Santorelli

Reputation: 1338

There are several issues with your routes set-up. I'll try to clarify.

{path:'',redirectTo:'home',pathMatch:'full'},

In this, you are saying that when someone goes to url.com/ they get redirected to url.com/home which is all good so far.

In here:

{ path:'home',component: HomeComponent},

you load homeComponent. All good as well. But then:

{ path:'',component: WorksComponent,children:[
  {path:'',redirectTo:'works',pathMatch:'full'},
  { path:'cenzor',component: CenzorComponent},
  { path:'userlist',component: UserlistComponent},
  { path:'tasklist',component: TasklistComponent},
] }

In here you are telling the router that '' path will load the WorksComponent, but this will never happen because of the first mentioned thing (you reroute this path to home, so user can never get here).

Next, you are adding children to this path. So even if you could access this component, you would need to add a <router-outlet> into the markdown of WorksComponent.

You are trying to access home/userlist which makes me realize that you want to:

  1. Add the children properties to HomeComponent, that way, this component is the one with access to all paths after it (url.com/home/*), so if you add userlist as a child of HomeComponent you could route url.com/home/userlist, right now this path doesn't exist.
  2. Add a <router-outlet> to your HomeComponent's html. Inside this router outlet is where the userlist component will render. So if you do
    <h1>This is home</h1>
    <router-outlet></router-outlet>
    <p>Some text goes here</p>

Then the userlist component will render between the title, and the text. If that makes sense. Also reroute your WorksComponent, it is incongruent for a route to have a redirectTo and a component load at the same time.

Upvotes: 1

Related Questions