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 },
];
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 },
];
The error occurs because you are trying to access a route that doesn't exist.
The route that you are trying to access is login-admin/admin-dashboard
and that path doesn't exist.
You have to access login-admin
in order to get the view with the component called LoginComponent
.
If you want to access AdminDashboardComponent
you need to access only admin-dashboard
.
They are two different routes and they aren't nested.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.