Angular модулей маршрутизации - не маршрутизации

Question

Я очень плохо знаком с angular модулями маршрутизации и отложенной загрузки.

ОШИБКА Ошибка: Uncaught (в обещании): Ошибка: не удается сопоставить ни один маршрут. Сегмент URL: «login-admin / admin-dashboard» Ошибка: невозможно сопоставить ни один маршрут. Сегмент URL: 'login-admin / admin-dashboard'

Я не знаю, где я получаю сообщение об ошибке.

Модуль приложения

@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 },

];

Answer 1

Есть пара вещей, которые не так как есть.

Насколько я понял из вашего кода, вы хотите добиться чего-то вроде следующего:

Вы хотите иметь AdminModule и делегировать все маршруты, начинающиеся с /login-admin этому модулю. Оттуда AdminModule вступит во владение и создаст внутренние маршруты.

Исходя из этого, вам необходимо отредактировать следующие части в вашем коде

app-routing.module

У вас есть объявил маршрут root ('') дважды, что сбивает с толку angular, и попытался определить маршрут login-admin к LoginAdminComponent, что является задачей AdminModule.

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'
  }

];

Давайте изменим его

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}
];

Также, если вы используете angular v8 +, вам нужно вместо этого использовать следующую инструкцию импорта.

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

С этим setup, мы делегируем каждый маршрут, который начинается с login-admin до AdminRoutingModule.

Давайте исправим AdminRoutingModule

Снова вы объявили маршрут '' дважды. Просто удалите первый.

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

Answer 2

Ошибка возникает из-за того, что вы пытаетесь получить доступ к несуществующему маршруту.

Маршрут, по которому вы пытаетесь получить доступ, login-admin/admin-dashboard, а этот путь не существует.

Вам необходимо получить доступ к login-admin, чтобы получить представление с компонентом с именем LoginComponent.

. Если вы хотите получить доступ к AdminDashboardComponent, вам нужен доступ только к admin-dashboard.

*. 1013 * Это два разных маршрута, и они не являются вложенными.