Router-outlet不是已知元素，延迟加载

Question

我有一个AppModule的angular项目和一个叫做PagesModule的功能模块，它正在被延迟加载，我在那里做了一些路由，

我想创建一个与PagesModule并行的新功能模块，并将其命名为CustomersModule，然后在那里执行一些其他路由。

我的两个子模块(PagesModule和CustomersModule)都导入到AppModule imports数组中。

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    AppRoutingModule,
    ThemeModule.forRoot(),
    NbSidebarModule.forRoot(),
    NbMenuModule.forRoot(),
    NbDatepickerModule.forRoot(),
    NbDialogModule.forRoot(),
    NbWindowModule.forRoot(),
    NbToastrModule.forRoot(),
    PagesModule,
    CustomersModule,
    NbChatModule.forRoot({
        messageGoogleMapKey: 'AIzaSyA_wNuCzia92MAmdLRzmqitRGvCF7wCZPY',
    }),
    CoreModule.forRoot(),
],

两者都具有导入RouterModule.forChild(路由)和导出RouterModule的路由模块

 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { CustomersComponent } from './customers.component';
 import { AuthGuard } from '../auth/auth-guard.service';
 import { Roles } from '../shared/Constants';
 import { DashboardComponent } from './dashboard/dashboard.component';

 const routes: Routes = [{
path: '',
component: CustomersComponent,
children: [
    {
        path: 'dashboard',
        canActivate: [AuthGuard],
        data: { role: Roles.customer },
        component: DashboardComponent,
    },
    {
        path: '',
        redirectTo: 'dashboard',
        pathMatch: 'full',
    },
],
 }];

 @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule],
 })
 export class CustomersRoutingModule { }

此外，这两个模块都有基本组件，该组件将充当父组件，并包含路由器出口，该出口将用于呈现默认组件(仪表板)和其他组件。

从‘@angular/core’导入{ Component }；从‘../pages/pages-menu’导入{ MENU_ITEMS }；

@Component({
selector: 'ngx-customer',
styleUrls: ['customers.component.scss'],
template: `
<ngx-one-column-layout>
  <nb-menu [items]="menu"></nb-menu>
  <router-outlet></router-outlet>
</ngx-one-column-layout>
 `,
})
export class CustomersComponent {

menu = MENU_ITEMS;
}

另外，我的主应用程序路由模块将路由配置为forRoot，并设置了延迟加载模块

export const routes: Routes = [
    { path: 'auth-callback', component: AuthCallbackComponent },
    {
    path: 'pages',
    loadChildren: () => import('./pages/pages.module')
        .then(m => m.PagesModule),
},
{
    path: 'customer',
    loadChildren: () => import('./customers/customers.module')
        .then(m => m.CustomersModule),
},
{
    path: 'auth',
    component: AuthComponent,
    children: [
        {
            path: '',
            component: LoginComponent,
        },
        {
            path: 'login',
            component: LoginComponent,
        },
        {
            path: 'register',
            component: NbRegisterComponent,
        },
        {
            path: 'request-password',
            canActivate: [AuthGuard],
            component: NbRequestPasswordComponent,
        },
        {
            path: 'reset-password',
            canActivate: [AuthGuard],
            component: NbResetPasswordComponent,
        },
    ],
},
{ path: '', redirectTo: 'auth', pathMatch: 'full' },
{ path: '**', redirectTo: 'auth' },
];

并且我仍然得到错误不是一个可识别的组件

我尝试了所有建议的错误，尝试手动创建所有文件，也尝试使用ng g m customers --路由，但没有帮助，多次尝试重新编译都没有成功，我想知道是否有一些配置需要添加这个新功能模块( CustomersModule )，因为我在整个项目中搜索PagesModule并将我的CustomersModule添加到所有出现的地方。

任何帮助都将不胜感激。

谢谢!

Answer 1

如果您使用的是延迟加载模块，为什么还要在已经通过路由器加载的Appmodule中导入PagesModule或CustomerModule。

还有，你在customer.module.ts文件的声明中添加了CustomerComponent。

您是否可以尝试从appmodule中删除PagesModule或CustomerModule，并在customer.module.ts文件中添加CustomerComponent。