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

Question

我有一个 angular 项目，其中包含 AppModule 和一个名为 PagesModule 的功能模块，它正在被延迟加载，我在其中进行一些路由，

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

我的两个子模块（PagesModule 和 CustomersModule）都被导入到 AppModule 导入数组。

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(routes) 和导出 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”导入{组件}；从 '../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 --routing，但没有任何帮助，尝试重新编译多次但没有成功，我想知道是否有一些配置需要添加这个新功能模块 (CustomersModule)，因为我在整个项目中搜索了 PagesModule 并将我的 CustomersModule 添加到所有出现的地方。

如有任何帮助，我们将不胜感激。

谢谢！

Answer 1

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

您是否还在 customer.module.ts 文件的声明中添加了 CustomerComponent。

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

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

Router-outlet is not a known element, lazy loading

routes

module

lazy-loading

angular