无法匹配任何角度 13 的路线

Question

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!

Answer 1

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.

Answer 2

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".