Router-outlet is not a known element, lazy loading

Question

I have an angular project with AppModule and a feature module called PagesModule which is being lazy loaded, where i do some routing,

I want to create a new feature module paralel to the PagesModule and call it CustomersModule and then also do some other routing there.

Both my child modules (PagesModule and CustomersModule) are imported to the AppModule imports array.

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(),
],

Both have routing modules that import RouterModule.forChild(routes) and export 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 { }

And also both Modules do have the base component that would serve as the parent and contain the router-outlet which would be used to render a default component (Dashboard) and others later.

import { Component } from '@angular/core'; import { MENU_ITEMS } from '../pages/pages-menu';

@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;
}

Also my main app-routing module has routes configured as forRoot and lazy loaded modules set

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' },
];

And I am still getting the error is not a recognized component

I tried all of the suggested errors, tried creating all the files manually and also using ng g m customers --routing, but nothing helped, tried recompiling multiple times without success, I'm wondering is there some configuration where i need to add this new feature module (CustomersModule) because i searched the whole project for PagesModule and added my CustomersModule to all the occurances.

Any help would be greatly appreciated.

Thanks!

I forgot to mention that I am using ngx-admin, nebula theme as a template — Edin

user6795317 user6795317 · Accepted Answer · 2020-09-04T11:43:52

If you're using lazy loading modules why are you importing PagesModule or CustomerModule inside Appmodule which is already loaded via router.

Also have you added CustomerComponent in declaration in customer.module.ts file.

Can you try removing PagesModule or CustomerModule from appmodule and add CustomerComponent inside customer.module.ts file.

Router-outlet is not a known element, lazy loading

1 Answers