Angular routing url issue

Question

I am simply practicing routing. I want to simply show display the page on click but its showing error

Error: Cannot match any routes. URL Segment: 'dashboard/eCommerce'

This is my project structure

On login page i use click function to show the other page like this

login(){
    this.router.navigate(['/dashboard/eCommerce']);
}

dashboard-routing module

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    
    import { EcommerceComponent } from "./eCommerce/eCommerce.component";
    
    const routes: Routes = [
      {
        path: '',
        children: [
          {
            path: 'eCommerce',
            component: EcommerceComponent,
            data: {
              title: 'eCommerce'
            }
          },
        ]
      }
    ];
    
    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule],
    })
    export class DashboardRoutingModule { }

This is my app-routing module

const appRoutes: Routes = [
  {
    path: '',
    component: LoginPageComponent,
    pathMatch: 'full',
  },

    {
    path: 'register',
    component: RegisterPageComponent,
    pathMatch: 'full',
  },
  { path: '', component: FullLayoutComponent, data: { title: 'full Views' }, children: Full_ROUTES, canActivate: [AuthGuard] },
  { path: '', component: ContentLayoutComponent, data: { title: 'content Views' }, children: CONTENT_ROUTES, canActivate: [AuthGuard] },
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
})

export class AppRoutingModule {

}

In app-routing module my login page is directly open (mean its my first page) Then i need on button click on login i need to show the dashboard/Ecommerce but don't know why its showing error

Hi there, I'm not seeing the definition for the route 'dashboard' even if you have nested modules, you must explicitly declare paths, check this out, maybe it can give you and idea stackoverflow.com/questions/41348913/… let me know if it helps — Camilo Casadiego
– Camilo Casadiego, Commented Oct 20, 2020 at 12:12

code-gorilla · Accepted Answer · 2020-10-20 12:09:27Z

1

From your code I can't see how the path /dashboard/eCommerce could exist, as dashboard is not mentioned somewhere (except implicitly through the module name).

You probably want this:

const routes: Routes = [
      {
        // This would define the path to be named 'dashboard'.
        path: 'dashboard',
        children: [
          {
            path: 'eCommerce',
            component: EcommerceComponent,
            data: {
              title: 'eCommerce'
            }
          },
        ]
      }
    ];

answered Oct 20, 2020 at 12:09

code-gorilla

2,4581 gold badge10 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rameez khan Over a year ago

still not working. i am using code from some project and still confused that how its working without path

Tomerikoo · Accepted Answer · 2020-10-20 13:56:59Z

0

Try this:

      login(){
    this.router.navigate(['/eCommerce']);
}

edited Oct 20, 2020 at 13:56

Tomerikoo

19.6k16 gold badges57 silver badges68 bronze badges

answered Oct 20, 2020 at 12:03

echo martha

12 bronze badges

Collectives™ on Stack Overflow

Angular routing url issue

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related