时间戳

首页 > 解决方案 > ngx-admin 新模块和组件未运行

angular - ngx-admin 新模块和组件未运行

问题描述

我正在为我的项目使用 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 时出现了某种错误，所以请尝试在这个线程中帮助我。

标签： angulartypescriptangular-routingngx-admin

解决方案

你没有导入ClassesAndStudentsRoutingModule。

它应该被导入ClassesandStudentsModule：

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

你ClassesandStudentsModule看起来像这样：

班级和学生.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 { }

推荐阅读