ngx-admin new module and components not running

Question

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.

Answer 1

You didn't import ClassesAndStudentsRoutingModule.

It should be imported in ClassesandStudentsModule:

import { ClassesAndStudentsRoutingModule } from './classes-and-students-routing.module';
...
@NgModule({
  imports: [
    ClassesAndStudentsRoutingModule,
  ],
  ...
})
export class ClassesandStudentsModule { }

Your ClassesandStudentsModule would look like this:

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

import { ClassesAndStudentsRoutingModule } from './classes-and-students-routing.module';

@NgModule({
    imports: [
        FormsModule,
        ReactiveFormsModule,
        ThemeModule,
        NbTabsetModule,
        NbRouteTabsetModule,
        NbStepperModule,
        NbCardModule,
        NbButtonModule,
        NbListModule,
        NbAccordionModule,
        NbUserModule,
        NbTreeGridModule,
        NbIconModule,
        NbInputModule,
        ThemeModule,
        TablesRoutingModule,
        Ng2SmartTableModule,
        ClassesAndStudentsRoutingModule, // here
    ],
    declarations: [
        ClassesAndStudentsComponent, // Updated
        // You need to uncomment the other components below
        // UpcomingClassesComponent,
        // ScheduleclassComponent,
        // TablesComponent,
        // SmartTableComponent,
        // TreeGridComponent,
        ...routedComponents,
        FsIconComponent,
        ShippingComponent,
        PastclassesComponent,
        InstructorbiddingComponent,
        KeycodesalesComponent,
        StudentsearchComponent,
        UnscheduledstudentsComponent,
    ],
    providers: [
        NewsService,
    ],
})
export class ClassesandStudentsModule { }