I am using Akveo/ngx-admin template for my project. I have created a new module inside the pages module and created some components inside my new module. In the pages module there are already some modules that were already there so i just created the new module followed the same approach as other modules did for defining the routes of a new module and its components inside it. The template code is in this github repo akveo/ngx-admin. So now after running my code i tried to access my new component but it just redirected me to page not found component.
Here is my code snippet for my new 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 {
}
pages-routing.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 file
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 { }
unfortunately i could not create a stackblitz component for this problem because there is some kind of error while importing this project into stackblitz so please try to help me here in this thread.
