routes - Angular 11, ''router-outlet' is not a known element:'

Question

I have already searched posts with similar scenarios as mine, all they did is add RouterModule in the Module on which the second router-outlet sits(layout.module in my case), I just coudn't figured out what is wrong with my routing.

app.component.html

     <router-outlet></router-outlet>

app.module

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { LayoutModule } from '@angular/cdk/layout';
    import { FormsModule, ReactiveFormsModule } from '@angular/forms';
    import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
    import { RouterModule } from '@angular/router';

    
    @NgModule({
      declarations: [
        AppComponent,
        PageNotFoundComponent,
      ],
      imports: [
        BrowserModule,
        LayoutModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        ReactiveFormsModule,
        FormsModule,
        RouterModule
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

app-routing.module

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { CourierModule } from './features/courier/courier.module';
    import { CustomerModule } from './features/customer/customer.module';
    import { LoginModule } from './features/login/login.module';
    import { ShopOwnerModule } from './features/shop-owner/shop-owner.module';
    import { LayoutComponent } from './layout/layout/layout.component';
    import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
    
    const routes: Routes = [
      { path: '', redirectTo: '/login', pathMatch: 'full' },
      { path: 'login', loadChildren: () => LoginModule },
      {
        path: '',
        component: LayoutComponent,
        children: [
          {path: 'shop-owner', loadChildren: () => ShopOwnerModule},
          {path: 'courier', loadChildren: () => CourierModule},
          {path: 'customer', loadChildren: () => CustomerModule}
        ]
      },
      { path: '**', component: PageNotFoundComponent }
    ];
    
    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }

layout.component.html

    <p>layout worksxxx!</p>
    <router-outlet></router-outlet>

layout.module

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { LayoutComponent } from './layout/layout.component';
    import { RouterModule } from '@angular/router';
    
    @NgModule({
      declarations: [LayoutComponent],
      imports: [
        RouterModule,
        CommonModule
      ],
      exports: [LayoutComponent]
    })
    export class LayoutModule { }

I can't figured what causes the "router-outlet' is not a known element" error on layout.html, can anyone shed some light on me.

Answer 1

You Import Wrong Layout Module in AppModule,

In AppModule File, Line 6;

import { LayoutModule } from '@angular/cdk/layout';

Import LayoutModule from your Module not @angular/cdk/layout.