How to solve "BrowserModule has already been loaded." on Angular

Question

I have this 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." on my Angular web app. I try to solve it with in importing CommonModule on each child modules, and import only once BrowserModule and BrowserAnimationsModule on app.module.ts. I have three modules : one parent AppModule :

import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { LoginComponent } from './components/login/login.component';
import {AuthGuard} from './guards/auth.guard';
import {AuthenticationService} from './services/authentication.service';
import { NavbarComponent } from './components/navbar/navbar.component';
import {AdminGuard} from './guards/admin.guard';
import {AppInterceptor} from './interceptors/app.interceptor';
import {FaIconLibrary, FontAwesomeModule} from '@fortawesome/angular-fontawesome';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {
  faArrowAltCircleDown,
  faArrowDown,
  faArrowRight,
  faArrowUp,
  faCheck,
  faEdit,
  faExchangeAlt, faExclamationCircle, faFileAlt, faHome, faInfo,
  faKey,
  faLock,
  faLockOpen,
  faPlus,
  faSearch,
  faSearchDollar, faSignOutAlt,
  faSort,
  faSortAlphaDown,
  faSortAlphaDownAlt,
  faSortAlphaUp,
  faSortNumericDown,
  faSortNumericDownAlt,
  faSortNumericUp,
  faSyncAlt,
  faTimes,
  faTrash, faUserEdit
} from '@fortawesome/free-solid-svg-icons';
import {BrowserModule} from '@angular/platform-browser';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    NavbarComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    FontAwesomeModule,
    AppRoutingModule,
  ],
  providers: [AuthGuard, AuthenticationService, AdminGuard, {
    provide: HTTP_INTERCEPTORS,
    useClass: AppInterceptor,
    multi: true
  }],
  exports: [
    NavbarComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(library: FaIconLibrary) {
    library.addIcons(
      faKey,
      faTrash,
      faLock,
      faLockOpen,
      faSyncAlt,
      faTimes,
      faExchangeAlt,
      faSearch,
      faPlus,
      faArrowRight,
      faCheck,
      faArrowDown,
      faArrowUp,
      faSort,
      faSortAlphaDown,
      faSortNumericDown,
      faSortAlphaUp,
      faSortNumericUp,
      faSortAlphaDownAlt,
      faSortNumericDownAlt,
      faEdit,
      faSearchDollar,
      faFileAlt,
      faHome,
      faUserEdit,
      faSignOutAlt,
      faArrowAltCircleDown,
      faExclamationCircle,
      faInfo
    )
  }
}

And two childs : LoggedAppModule :

import { NgModule} from '@angular/core';
import {FontAwesomeModule} from "@fortawesome/angular-fontawesome";
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatSelectModule} from '@angular/material/select';
import {MatPaginatorModule} from '@angular/material/paginator';
import {MatTooltipModule} from '@angular/material/tooltip';
import {NgxPaginationModule} from 'ngx-pagination';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {NgMultiSelectDropDownModule} from 'ng-multiselect-dropdown';
import {CompetitorsComponent} from './components/competitors/competitors.component';
import {LoaderComponent} from './components/loader/loader.component';
import {EditPasswordComponent} from './components/edit-password/edit-password.component';
import {CompanyComponent} from './components/company/company.component';
import {LayoutComponent} from './components/layout/layout.component';
import {EditWcKeysComponent} from './components/company/edit-wc-keys/edit-wc-keys.component';
import {CompetitorComponent} from './components/competitor/competitor.component';
import {SafePipe} from './pipe/safe.pipe';
import {ProductsComparisonComponent} from './components/products-comparison/products-comparison.component';
import {ProductComponent} from './components/products/product/product.component';
import {AddCompetitorProductComponent} from './components/add-competitor-product/add-competitor-product.component';
import {BreadcrumbComponent} from './components/breadcrumb/breadcrumb.component';
import {CapitalizePipe} from './pipe/capitalize.pipe';
import {EditPathPriceComponent} from './components/company/edit-path-price/edit-path-price.component';
import {NgbdSortableHeader} from './directives/ngbd-sortable-header';
import {PriceProductHistoryComponent} from './components/partial/price-product-history/price-product-history.component';
import {SettingsComponent} from './components/settings/settings.component';
import {EditPasswordModalComponent} from './components/modal/edit-password-modal/edit-password-modal.component';
import {EditSearchProductCompetitorModalComponent} from './components/modal/edit-search-product-competitor-modal/edit-search-product-competitor-modal.component';
import {HomeComponent} from './components/home/home.component';
import {AppModule} from './app.module';
import {LoggedAppRoutingModule} from './logged-app-routing.module';
import {CommonModule} from '@angular/common';

@NgModule({
    declarations: [
      CompetitorsComponent,
      LoaderComponent,
      EditPasswordComponent,
      CompanyComponent,
      LayoutComponent,
      EditWcKeysComponent,
      CompetitorComponent,
      SafePipe,
      ProductsComparisonComponent,
      ProductComponent,
      AddCompetitorProductComponent,
      BreadcrumbComponent,
      CapitalizePipe,
      EditPathPriceComponent,
      NgbdSortableHeader,
      PriceProductHistoryComponent,
      SettingsComponent,
      EditPasswordModalComponent,
      EditSearchProductCompetitorModalComponent,
      HomeComponent
    ],
  imports: [
    CommonModule,
    AppModule,
    FormsModule,
    ReactiveFormsModule,
    MatSelectModule,
    MatPaginatorModule,
    MatTooltipModule,
    NgxPaginationModule,
    FontAwesomeModule,
    NgbModule,
    NgMultiSelectDropDownModule.forRoot(),
    LoggedAppRoutingModule,
  ],
  exports: [
    LoaderComponent,
    BreadcrumbComponent
  ],
  providers: [
  ]
})
export class LoggedAppModule {
}

AdminModule :

import { NgModule } from '@angular/core';
import {AdminComponent} from "./admin.component";
import {LayoutAdminComponent} from "./layout/layout.admin.component";
import {AdminRoutingModule} from "./admin-routing.module";
import {CompaniesComponent} from './companies/companies.component';
import {AddCompanyComponent} from './add-company/add-company.component';
import {ProductsComponent} from '../products/products.component';
import {LoggedAppModule} from '../../logged-app.module';
import {AdminGuard} from '../../guards/admin.guard';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatTooltipModule} from '@angular/material/tooltip';
import {NgxPaginationModule} from 'ngx-pagination';
import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
import {NavbarAdminComponent} from './navbar/navbar.admin.component';
import {CommonModule} from '@angular/common';


@NgModule({
  declarations: [
    AdminComponent,
    LayoutAdminComponent,
    CompaniesComponent,
    AddCompanyComponent,
    ProductsComponent,
    NavbarAdminComponent,
  ],
    imports: [
        CommonModule,
        LoggedAppModule,
        FontAwesomeModule,
        NgxPaginationModule,
        MatTooltipModule,
        FormsModule,
        ReactiveFormsModule,
        AdminRoutingModule,
    ],
  providers: [
    AdminGuard
  ]
})
export class AdminModule { }

I don't find any solution. Please help me

Answer 1

The problem is happening because you are importing the "AppModule" from your child module "LoggedAppModule"

In your app, nothing should import the App module (assuming this is the root module of your app).

The child modules (lazzy-loaded or not) should import the CommonModule (which shares the AppModule imports to the child modules).