BrowserModule has already been loaded , create lazy loading module

Question

Error is :

Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.
    at new BrowserModule

Two days i search Internet , not getting fisible solution:

Add and remove BrowserModule and import CommonModule in NotificationModule no use of it.

Here See the ScreenShot: https://i.sstatic.net/sM9ZS.png

I have Two Modules ,

1. AppModule
2. NotificationModule

My Goal is : I have SearchComponent in app.module , i need to get in notification.module .

In AppModule i define:

imports: [
    BrowserAnimationsModule,
    HttpClientModule,
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    NgxSpinnerModule,
    NgSelectModule,
    CalendarModule,
    PopoverModule.forRoot(),
    TabsModule.forRoot(),
    TooltipModule.forRoot(),
    AccordionModule.forRoot(),
    NgxUsefulSwiperModule,
    PickerModule,
    NgxFileDropModule,
    NgxMaterialTimepickerModule,
    PlyrModule,
    NgbModule,
    SocketIoModule.forRoot(config),
    ContenteditableModule,
    ScrollEventModule,
    NgxStarsModule,
    NgImageSliderModule,
    NgxImageZoomModule.forRoot(),
    ProgressBarModule,
    InfiniteScrollModule,
    ColorPickerModule,
    NgxBraintreeModule,
    QRCodeModule
  ],
 exports: [
    SearchComponent ,
],

Routing AppModule:

{ 
        path: 'Notification',
        loadChildren: () => import('./notification/notification.module').then(m => m.NotificationModule) 
    },

And My NotificationModule : here i import app.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { AppModule } from '../app.module';
import { NotificationRoutingModule } from './notification-routing.module';
import { ListComponent } from './list/list.component';

@NgModule({
  declarations: [
        ListComponent
    ],
  imports: [
    CommonModule ,
    AppModule ,
    NotificationRoutingModule
  ]
})
export class NotificationModule { }

Routing NotificationModule is :

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

import { ListComponent } from './list/list.component';

const routes: Routes = [
        {
            path: 'List',
            component: ListComponent
        }
    ];

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

Help is really appreciated .

Answer 1

The reason you are getting the error is becauase in notification module you import the App module again.

@NgModule({
  declarations: [
        ListComponent
    ],
  imports: [
    CommonModule ,
    AppModule ,// remove this line.
    NotificationRoutingModule
  ]
})
export class NotificationModule { }

If there is a need for something in the appmodule then extract it to a separate shared module and import that one.