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 >
    <div  style="width: 18rem;">
        <img src="../../assets/images/1.jpg"  alt="...">
        <div >
          <h5 >list of prohibited words</h5>
       
          <a  routerLink="censor">censor</a>
        </div>
        
      </div>
      <div  style="width: 18rem;">
        <img src="../../assets/images/2.jpg"  alt="...">
        <div >
          <h5 >angular task list</h5>
       
          <a  routerLink="tasklist">tasklist</a>
        </div>
      </div>
      <div  style="width: 18rem;">
        <img src="../../assets/images/3.jpg"  alt="...">
        <div >
          <h5 >Angular users list</h5>
       
          <a   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!

CodePudding user response：

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.

CodePudding user response：

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