我正在为我的项目使用 Akveo/ngx-admin 模板。我在 pages 模块中创建了一个新模块，并在我的新模块中创建了一些组件。在页面模块中已经有一些模块已经存在，所以我刚刚创建了新模块，遵循与其他模块相同的方法来定义新模块及其内部组件的路由。模板代码在这个 github repo akveo/ngx-admin中。所以现在在运行我的代码后，我尝试访问我的新组件，但它只是将我重定向到page not found组件。
这是我的新代码片段classes-and-students-routing-module.ts
const routes: Routes = [{
path: '',
component: ClassesAndStudentsComponent,
children: [
{
path: 'upcoming-classes',
component: UpcomingClassesComponent
},
{
path: 'scheduleclass',
component: ScheduleclassComponent
},
{
path: 'pastclasses',
component: PastclassesComponent
},
{
path: 'instructorbidding',
component: InstructorbiddingComponent
},
{
path: 'keycodesales',
component: KeycodesalesComponent
},
{
path: 'studentsearch',
component: StudentsearchComponent
},
{
path: 'unscheduledstudents',
component: UnscheduledstudentsComponent
},
{
path: 'shipping',
component: ShippingComponent
}
]
}];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ClassesAndStudentsRoutingModule {
}
页面路由.module.ts
const routes: Routes = [{
path: '',
component: PagesComponent,
children: [
{
path: 'dashboard',
component: ECommerceComponent,
},
{
path: 'iot-dashboard',
component: DashboardComponent,
},
{
path: 'classes-and-students',
loadChildren: () => import('./classes-and-students/classes-and-students.module')
.then(m => m.ClassesandStudentsModule),
},
{
path: 'layout',
loadChildren: () => import('./layout/layout.module')
.then(m => m.LayoutModule),
},
{
path: 'forms',
loadChildren: () => import('./forms/forms.module')
.then(m => m.FormsModule),
},
{
path: 'ui-features',
loadChildren: () => import('./ui-features/ui-features.module')
.then(m => m.UiFeaturesModule),
},
{
path: 'modal-overlays',
loadChildren: () => import('./modal-overlays/modal-overlays.module')
.then(m => m.ModalOverlaysModule),
},
{
path: 'extra-components',
loadChildren: () => import('./extra-components/extra-components.module')
.then(m => m.ExtraComponentsModule),
},
{
path: 'maps',
loadChildren: () => import('./maps/maps.module')
.then(m => m.MapsModule),
},
{
path: 'charts',
loadChildren: () => import('./charts/charts.module')
.then(m => m.ChartsModule),
},
{
path: 'editors',
loadChildren: () => import('./editors/editors.module')
.then(m => m.EditorsModule),
},
{
path: 'tables',
loadChildren: () => import('./tables/tables.module')
.then(m => m.TablesModule),
},
{
path: 'miscellaneous',
loadChildren: () => import('./miscellaneous/miscellaneous.module')
.then(m => m.MiscellaneousModule),
},
{
path: '**',
component: NotFoundComponent,
},
],
}];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class PagesRoutingModule {
}
pages-menu.ts
import { NbMenuItem } from '@nebular/theme';
export const MENU_ITEMS: NbMenuItem[] = [
{
title: 'Classes and Students',
icon: 'layout-outline',
children: [
{
title: 'Upcoming Classes',
link: '/pages/classes-and-students/upcoming-classes',
},
{
title: 'Schedule a Class',
link: '/pages/classes-and-students/scheduleclass',
},
{
title: 'Past Classes',
link: '/pages/classes-and-students/pastclasses',
},
{
title: 'Instructor Bidding',
link: '/pages/classes-and-students/instructorbidding',
},
{
title: 'Keycode Sales',
link: '/pages/classes-and-students/keycodesales',
},
{
title: 'Student Search',
link: '/pages/classes-and-students/studentsearch',
},
{
title: 'Unscheduled Students',
link: '/pages/classes-and-students/unscheduledstudents'
},
{
title: 'Shipping',
link: '/pages/classes-and-students/shipping'
}
],
}
}
];
classes-and-students.module.ts 文件
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {
NbAccordionModule,
NbButtonModule,
NbCardModule,
NbListModule,
NbRouteTabsetModule,
NbStepperModule,
NbTabsetModule, NbUserModule,
} from '@nebular/theme';
import { NbIconModule, NbInputModule, NbTreeGridModule } from '@nebular/theme';
import { Ng2SmartTableModule } from 'ng2-smart-table';
import { ThemeModule } from '../../@theme/theme.module';
import { UpcomingClassesComponent } from './upcoming-classes/upcoming-classes.component';
import { NewsService } from '../layout/news.service';
import { TablesRoutingModule, routedComponents } from '../tables/tables-routing.module';
import { ScheduleclassComponent } from './scheduleclass/scheduleclass.component';
import { TablesComponent } from '../tables/tables.component';
import { SmartTableComponent } from '../tables/smart-table/smart-table.component';
import { TreeGridComponent } from '../tables/tree-grid/tree-grid.component';
import { FsIconComponent } from '../tables/tree-grid/tree-grid.component';
import { ShippingComponent } from './shipping/shipping.component';
import { PastclassesComponent } from './pastclasses/pastclasses.component';
import { InstructorbiddingComponent } from './instructorbidding/instructorbidding.component';
import { KeycodesalesComponent } from './keycodesales/keycodesales.component';
import { StudentsearchComponent } from './studentsearch/studentsearch.component';
import { UnscheduledstudentsComponent } from './unscheduledstudents/unscheduledstudents.component';
@NgModule({
imports: [
FormsModule,
ReactiveFormsModule,
ThemeModule,
NbTabsetModule,
NbRouteTabsetModule,
NbStepperModule,
NbCardModule,
NbButtonModule,
NbListModule,
NbAccordionModule,
NbUserModule,
NbTreeGridModule,
NbIconModule,
NbInputModule,
ThemeModule,
TablesRoutingModule,
Ng2SmartTableModule
],
declarations: [
// UpcomingClassesComponent,
// ScheduleclassComponent,
// TablesComponent,
// SmartTableComponent,
// TreeGridComponent,
...routedComponents,
FsIconComponent,
ShippingComponent,
PastclassesComponent,
InstructorbiddingComponent,
KeycodesalesComponent,
StudentsearchComponent,
UnscheduledstudentsComponent,
],
providers: [
NewsService,
],
})
export class ClassesandStudentsModule { }
不幸的是，我无法为这个问题创建一个 stackblitz 组件，因为在将这个项目导入到 stackblitz 时出现了某种错误，所以请尝试在这个线程中帮助我。