Angular modules routing - not routing

Question

I very new to angular routing and lazy loading modules.

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'login-admin/admin-dashboard' Error: Cannot match any routes. URL Segment: 'login-admin/admin-dashboard'

I don' know where I'm getting the error tho.

App Module

@NgModule({
  declarations: [
    AppComponent,
    SignupAdminComponent,
    HeadersComponent,
    LoginAdminComponent
  ],
 bootstrap: [AppComponent]

App.Routing.ts

const routes: Routes = [
  { path: '', redirectTo: '/login-admin', pathMatch: 'full'},
  { path: 'login-admin',  component: LoginAdminComponent},
  { path: 'sigup-admin',  component: SignupAdminComponent},  
  { path: '',    
    loadChildren:  './components/dashboards/admin-dashboard/admin-routing.module#AdminRoutingModule'

  }

];

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forRoot(routes),
    // AdminDashboardModule
  ]
})
export class AppRoutingModule { }

admin-routing.module.ts

@NgModule({
  declarations: [
    AdminDashboardComponent,
    SideBarComponent,
  ],
  imports: [
    CommonModule,
    NbLayoutModule,
    NbSidebarModule,
    NbButtonModule,
    RouterModule.forChild(AdminRoutes)
  ],
  exports: [  ]
})
export class AdminRoutingModule { }

admin-routing.ts

import { Routes } from '@angular/router';

import { AdminDashboardComponent } from './admin-dashboard.component';
import { LoginAdminComponent } from '../../accounts/admin/login-admin/login-admin.component';
import { SideBarComponent } from './side-bar/side-bar.component';
import { ExtenstionAgentComponent } from './extenstion-agent/extenstion-agent.component';

export const AdminRoutes: Routes = [                                 
      {
        path: '', component: AdminDashboardComponent},
            { path: '', redirectTo: 'admin-dashboard', pathMatch: 'full' },
            { path: 'admin-dashboard', component: AdminDashboardComponent },

];

Right now I would expect localhost:4200/admin-dashboard to route to the AdminDashboardComponent. It looks like you're expecting it to be localhost:4200/login-admin/admin-dashboard? — Kyle Anderson
@KyleAnderson I actually expecting localhost:4200/admin-dashboard and I was redirected to localhost:4200/login-admin/admin-dashboard — Joey

Bunyamin Coskuner Bunyamin Coskuner · Accepted Answer · 2020-02-24T18:26:15

There are couple of things that are wrong as is.

As far as I understood from your code, you want to achieve something like following:

You want to have an AdminModule and delegate all of the routes starting with /login-admin to that module. From there, AdminModule will take over and create inner routes.

Based on this, you need to edit following parts within your code

app-routing.module

You have declared the root route ('') twice which is confusing for angular and tried to define login-admin route to LoginAdminComponent which is AdminModule's job.

const routes: Routes = [
  { path: '', redirectTo: '/login-admin', pathMatch: 'full'},
  { path: 'login-admin',  component: LoginAdminComponent},
  { path: 'sigup-admin',  component: SignupAdminComponent},  
  { path: '',    
    loadChildren:  './components/dashboards/admin-dashboard/admin-routing.module#AdminRoutingModule'
  }

];

Let's change it

const routes: Routes = [
  { path: '', redirectTo: '/login-admin', pathMatch: 'full'},
  { path: 'login-admin', 
    loadChildren:  './components/dashboards/admin-dashboard/admin-routing.module#AdminRoutingModule'},
  { path: 'sigup-admin',  component: SignupAdminComponent}
];

Also if you use angular v8+, you need to use following import statement instead.

loadChildren: () => import('./components/dashboards/admin-dashboard/admin-routing.module').then(m => m.AdminRoutingModule)

With this setup, we delegate every route that starts with login-admin to AdminRoutingModule.

Let's fix AdminRoutingModule

Again you declared the route '' twice. Just delete the first one.

export const AdminRoutes: Routes = [                                 
   { path: '', redirectTo: 'admin-dashboard', pathMatch: 'full' },
   { path: 'admin-dashboard', component: AdminDashboardComponent },
];

Angular modules routing - not routing

2 Answers