angulartypescriptangular2-routinglazy-loadingangular2-modules

Reputation: 1471

Lazy Loading BrowserModule has already been loaded

I am trying to implement lazy loading but getting error as following **

ERROR Error: Uncaught (in promise): 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.

Need Help on this. Here are my Modules

Shared MOdule

@NgModule({

  declarations: [TimePipe],
  providers: [
    EmsEmployeeService,
    EmsDesignationService,
    EmsOrganizationService,
    EmsAuthService,
    AmsEmployeeService,
    AmsShiftService,
    ValidatorService,
    AmsLeaveService,
    AmsAttendanceService,
    AmsDeviceService,
    AmsOrganizationService,
    AmsAlertService,
    AmsHolidayService,
    AutoCompleteService,
    AmsTimelogsService,
    LocalStorageService
  ],
  imports: [
    HttpModule,
    ToastyModule.forRoot(),
    AgmCoreModule.forRoot({
      apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx'
    }),
  ],
  exports: [
    FormsModule,
    HttpModule,
    BrowserAnimationsModule,
    RouterModule,
    MaterialModule,
    MdDatepickerModule,
    MdNativeDateModule,
    ToastyModule,
    FileUploadModule,
    NgxPaginationModule,
    NguiAutoCompleteModule,
    AgmCoreModule,
    TimePipe
  ]
})
export class SharedModule { }

2.SettingModule

 @NgModule({
  imports: [
    CommonModule,
    SharedModule,
    SettingsRoutingModule
  ],
  declarations: [
    SettingsComponent,
    ShiftsComponent,
    DevicesComponent,
    AlertsComponent,
    HolidaysComponent,
    AlterTypesComponent,
    AlterEditComponent,
    ShiftTypeNewComponent,
    DeviceLogsComponent,
    ChannelTypesComponent,
    ChannelTypeEditComponent
  ], exports: [
    SettingsComponent,
    ShiftsComponent,
    DevicesComponent,
    AlertsComponent,
    HolidaysComponent,
    AlterTypesComponent,
    AlterEditComponent,
    ShiftTypeNewComponent,
    DeviceLogsComponent,
    ChannelTypesComponent,
    ChannelTypeEditComponent,
  ]
})
export class SettingsModule { }

3.SettingRoutingModule

const settings_routes: Routes = [
  { path: '', redirectTo: 'shifts', pathMatch: 'full' },
  { path: 'shifts', component: ShiftsComponent },
  { path: 'shifts/new', component: ShiftTypeNewComponent },
  { path: 'shifts/edit/:id', component: ShiftTypeNewComponent },
  { path: 'devices', component: DevicesComponent },
  { path: 'deviceLogs', component: DeviceLogsComponent },
  { path: 'holidays', component: HolidaysComponent },
  { path: 'alerts', component: AlertsComponent },
  { path: 'alerts/types', component: AlterTypesComponent },
  { path: 'alerts/:id', component: AlterEditComponent },
  { path: 'channelTypes', component: ChannelTypesComponent },
  { path: 'channelTypes/:id', component: ChannelTypeEditComponent }
];


const routes: Routes = [
  { path: '', component: SettingsComponent, children: settings_routes }
];



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

App-routing-module

const attdendance_routes: Routes = [
  { path: '', redirectTo: 'daily', pathMatch: 'full' },
  { path: 'monthly', component: MonthlyComponent },
  { path: 'daily', component: DailyComponent },

  { path: 'daily/:empId', component: AttendanceDetailsComponent },
  { path: 'details/:empId', component: AttendanceDetailsComponent },
  { path: 'monthly/:empId', component: AttendanceDetailsComponent },
  { path: 'leaves/:empId', component: AttendanceDetailsComponent },

  { path: 'details/:empId/apply-leave', component: ApplyLeaveComponent },
  { path: 'daily/:empId/apply-leave', component: ApplyLeaveComponent },
  { path: 'daily/:empId/attendance-logs/:ofDate', component: AttendanceLogsComponent },
  { path: 'monthly/:empId/apply-leave', component: ApplyLeaveComponent },
  { path: 'leaves/:empId/apply-leave', component: ApplyLeaveComponent },
  { path: 'leaves/new/apply', component: ApplyLeaveComponent },

  { path: 'leaves', component: LeavesComponent },
  { path: 'leave-balances', component: LeaveBalancesComponent },
  { path: 'leave-balances/:empId', component: AttendanceDetailsComponent },
  { path: 'manage-leaves', component: ManageLeavesComponent },

];



const emp_routes: Routes = [
  { path: '', redirectTo: 'list', pathMatch: 'full' },
  { path: 'list', component: EmployeeListComponent },
  { path: 'list/:id', component: EmpEditComponent },
  { path: 'designations', component: DesignationsComponent }
];



const page_routes: Routes = [
  { path: '', redirectTo: 'attendances', pathMatch: 'full' },
  { path: 'employees', component: EmployeesComponent, children: emp_routes },
  { path: 'attendances', component: AttendancesComponent, children: attdendance_routes },

  { path: 'settings', loadChildren: './pages/settings/settings.module#SettingsModule' },
];

// main routes
const routes: Routes = [
  { path: '', redirectTo: 'pages', pathMatch: 'full' },
  { path: 'login', component: LoginComponent, canActivate: [LoginGuard] },
  { path: 'pages', component: PagesComponent, canActivate: [UserGuard], children: page_routes },
  { path: 'loginViaOrg', component: OrgLoginComponent },
  { path: 'download', component: AppDownloadComponent },
  { path: '**', redirectTo: 'pages' },
];

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

5.AppModule

@NgModule({

  declarations: [
    AppComponent,
    PagesComponent,
    LoginComponent,
    EmployeesComponent,
    OrgLoginComponent,
    EmployeeListComponent,
    EmpEditComponent,
    DayEventDialogComponent,
    AttendancesComponent,
    MonthlyComponent,
    AttendanceDetailsComponent,
    DailyComponent,
    DeviceDialogComponent,
    LeaveActionDialogComponent,
    LeavesComponent,
    LeaveBalancesComponent,
    ManageLeavesComponent,
    ApplyLeaveComponent,
    ConfirmDialogComponent,
    ResetPasswordDialogComponent,
    AppDownloadComponent,
    DesignationsComponent,
    AttendanceLogsComponent,
  ],

  entryComponents: [
    DayEventDialogComponent,
    DeviceDialogComponent,
    LeaveActionDialogComponent,
    ConfirmDialogComponent,
    ResetPasswordDialogComponent
  ],

  imports: [
    BrowserModule,
    // CommonModule,
    SharedModule,
    AppRoutingModule,
    // feature modules
    // SettingsModule
  ],

  providers: [
    LoginGuard, UserGuard,
  ],

  bootstrap: [AppComponent]
})
export class AppModule { }

Upvotes: 131

Answers (17)

Wasit Shafi

Reputation: 1549

Working solution with the latest Angular V19.

STEP 1: add import in app.config.ts

import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

STEP 2: add/append provideAnimationsAsync in the providers array

providers: [
provideAnimationsAsync(),
]

For more info, you can refer to official docs: https://angular.dev/guide/animations

Additional info: I got the above bug once I tried to add a components of https://primeng.org/ because it requires animation module (https://primeng.org/installation#animations)

Upvotes: 0

Manishyadav

Reputation: 1726

Just remove BrowserModule from your app.component.ts file.

Upvotes: 0

mrOak

Reputation: 373

As per Angular Documentation; note that this applies for standalone components.

https://angular.io/guide/animations#step-1-enabling-the-animations-module

On app.config.ts make sure to add provideAnimations() under providers

import {provideAnimations} from "@angular/platform-browser/animations";

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideAnimations()]
};

Upvotes: 6

Yurii Hierts

Reputation: 1930

IDE Auto import! With standalone components, became new issue to the world of development. If you're using standalone components, it means in your project just one module - it is AppModule. Some IDEs like Webstorm, while creating Pipe/Component/... simply declares it in the AppModule, then IDE adding created Pipe/Component/... as import to your standalone component. So as you understood AppModule automatically brings BrowserModule second time. Solution, just make your Pipe/Component/... as standalone, remove all imports/exports, remove AppModule from import section.

Upvotes: 0

Ste

Reputation: 685

I had to move BrowserAnimationsModule from any child components imports

Upvotes: 6

Suneel Kumar

Reputation: 779

In same issue I was also stuck for 2 days, but finally I had resolve it! let me share my experience, I have created custom external library for the purpose of common components. I deployed it over azure devOps artifacts. When I installed it my project it's working fine as expected. Now when I try to import the some module as loadChildern within app-routing-module.ts. I am getting the same error

ERROR Error: Uncaught (in promise): 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.

My Project configuration is Okay, what a tinny mistake I have done, that is I imported both BrowserModule and CommonModule within my external library, So I just removed BrowserModule from that, It's working fine without any issue or error

What I have learned

BrowserModule is a root module, we have to import it once in whole project within AppModule & we can use CommonModule in other modules. We cannot use both module BrowserModule and CommonModule together.

This is what I have learned from this experience, If I miss understood then please let me know the correct one!

Upvotes: 1

heliya rb

Reputation: 830

pay attention: You must have a "BrowserModule" in root and must have a "CommonModule" for each child component

Upvotes: 0

Victor Pinedo

Reputation: 21

You need to check that in no other part of the application, a call or import of BrowserModule is being made. There are libraries that use the BrowserModule and by doing so they ruin the BrowserModule.

Upvotes: 1

Mira Kamali

Reputation: 70

This is how I fixed it:

The lazy module that I added into my project contained BrowserModule too.

That's when I removed it from the module, then it worked.

Upvotes: 0

Shubham

Reputation: 135

I solved this problem by removing BreadcrumbsModule from the shared module.

Upvotes: 0

Jota.Toledo

Reputation: 28434

Import BrowserModule, BrowserAnimationsModule, HttpModule or HttpClientModule only once, preferably in your root module.

Upvotes: 324

Santosh Kadam

Reputation: 1352

In my case I had shared module which was importing BrowserAnimationModule. I was importing shared module in my root module. to solve this error remove all imports of BrowserAnimationModule from all modules and add it to root module.

imports: [
    AppRoutingModule,
    SharedModule,
    BrowserAnimationsModule
  ],

Upvotes: 10

Chetan Birajdar

Reputation: 471

If you are using multiple modules, use Browser module only once in your app module or some custom module and use CommonModule from @angular/common in custom modules.

I was getting the same error , I was trying to reuse components, directives, pipes in multiple components/modules. Instead I imported all reusable components in a core module and imported the core module in multiple components/modules.

Upvotes: 1

Brahmmeswara Rao Palepu

Reputation: 199

@First Import BrowerModule and in imports also first include BrowserModule import:[BrowerModule ] 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

If we declare BrowserModule in any module other than app module(Duplicate) this error will come. the In app module if we import 10 modules or plugins, first we have to import BrowserModule at the top and declare in decorates (import:[BrowserModule ]) at the top

Upvotes: 1

Vitaliy Bilous

Reputation: 131

I had the same problem and Jota.Toledo gave the correct answer and I want only extend that: please check in shared module imports any modules that related with

@angular/platform-browser/animations

and move those modules into app.module.ts

Upvotes: 12

user9339378

Reputation: 119

I also got the same error and finally, after little bit struggle, I was able to fix it.

Import these mentioned modules only once(in app-module only):

BrowserModule, BrowserAnimationsModule, LazyLoadImageModule (if using it), CarouselModule (if using it), InfiniteScrollModule (if using it), HttpModule ( if using it)

Upvotes: 11

Fatema Saifee

Reputation: 139

This error can occur if you have imported BrowseModule in some child.app module.ts also. Please make sure you import CommonModule in all modules other than app.module as it has browser modules.

Upvotes: 10

Lazy Loading BrowserModule has already been loaded

Answers (17)

Working solution with the latest Angular V19.

Related Questions