路由器出口不是已知元素，延迟加载

编程问答 2022-08-12

问题描述

我有一个带有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',{
            path: 'register',component: NbRegisterComponent,{
            path: 'request-password',component: NbRequestPasswordComponent,{
            path: 'reset-password',component: NbResetPasswordComponent,{ path: '',redirectTo: 'auth',pathMatch: 'full' },{ path: '**',redirectTo: 'auth' },];

我仍然收到错误消息，该错误不是公认的组件

我尝试了所有建议的错误，尝试手动创建所有文件，还使用了ng g m个客户-路由，但无济于事，尝试多次重新编译但均未成功， 我想知道是否有一些配置需要添加这个新功能模块（CustomersModule），因为我在整个项目中搜索了PagesModule并将我的CustomersModule添加到了所有实例中。

任何帮助将不胜感激。

谢谢！

解决方法

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

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

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

angularlazy-loadingmodulemoduleroutes