Getting 'router-outlet' is not a known element in angular with lazy loading configuration that I have applied

Question

I am making use of Angular Framework to make a frontend application, the routing in app-routing.module.ts file is given below.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full',
    
  },
  {
    path: 'home',
    loadChildren: () => import('./landing/landing.module').then((m) => m.LandingModule) 
  },
  {
    path: '**',
    redirectTo: '/home',
    pathMatch: 'full'
  },
];

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

The Landing Module routing configuration is specifed in landing-routing.module.ts. Now the Routing in landing-routing.module.ts is done as

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LandingComponent } from './landing.component';

const routes: Routes = [
  {
    path: '',
    component: LandingComponent,
    children: [
      {
        path: 'user',
        loadChildren: () => import('./user/user.module').then((m) => m.UserModule)
      },
      {
        path: 'admin',
        loadChildren: () => import('./admin/admin.module').then((m) => m.AdminModule)
      }
    ]
  },
];

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

The UserModule and AdminModule have only one route which render the user.component.html and admin.component.html.

I have added <router-outlet></router-outlet> in app.component.html and landing.component.html. But I am getting error router-outlet is not a known element.

Am I doing something wrong in achieving the Lazy loading functionality ?. Please let me know.