Lazy Loading BrowserModule has already been loaded

Question

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 { }

Do you get this error on initial load of `index.html` or when you navigate to `/settings` ? — Günter Zöchbauer, Aug 31 '17 at 07:46
Are you sure **none** of all the involved modules (except `AppModule`) imports `BrowserModule`? — Günter Zöchbauer, Aug 31 '17 at 07:51
@GünterZöchbauer I Have imported CommonModule in all modules (except AppModule) — Er Sushil, Aug 31 '17 at 07:54
Quite weird. Sounds like a bug to me. What Angular version are you using? — Günter Zöchbauer, Aug 31 '17 at 08:01
@GünterZöchbauer this version "@angular/animations": "4.0.3", "@angular/cdk": "^2.0.0-beta.8", "@angular/common": "4.0.3", "@angular/compiler": "4.0.3", "@angular/compiler-cli": "4.0.3", "@angular/core": "4.0.3", "@angular/forms": "4.0.3", "@angular/http": "4.0.3", "@angular/material": "^2.0.0-beta.8", "@angular/platform-browser": "4.0.3", "@angular/platform-browser-dynamic": "4.0.3", "@angular/platform-server": "4.0.3", "@angular/router": "4.0.3", — Er Sushil, Aug 31 '17 at 08:03
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/153327/discussion-between-er-sushil-and-gunter-zochbauer). — Er Sushil, Aug 31 '17 at 08:04
@GünterZöchbauer I found Solution, I was importing BrowerAnimationModule in child.modules — Er Sushil, Aug 31 '17 at 09:59
Glad to hear you could make it work :) Thanks for the feedback! — Günter Zöchbauer, Aug 31 '17 at 10:08

Jota.Toledo · Accepted Answer · 2019-08-14T14:31:25.543

302

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

edited Aug 14 '19 at 14:31

answered Aug 31 '17 at 10:29

Jota.Toledo

27,293
11
59
73

37

It works! Just a little add: if you're using both `BrowserAnimationsModule` and `BrowserModule`, they should be imported in the same module. – Alvaro Jun 18 '19 at 15:52
4

Also, for those who have NoopAnimationsModule, the same rule applies. I had to also move that module. – harmonickey Aug 05 '19 at 02:49
1

THIS...So much this. I was trying to generate a lazy module with Angular CLI 9 and the output error was this non-descriptive 'cannot read properties of undefined' error. This answer saved me from burning my room down. I owe you Jota. – bwinchester Feb 12 '20 at 15:27
1

I had to import `AppRoutingModule` at the last, that resolved my error. But could not figure out the reason for that. – Amit Chigadani Apr 16 '20 at 18:52
You sir saved my day. Have my upvote. Would you be so kind to explain how this is necessary? – Chund Aug 28 '20 at 10:55
@Alvaro Your information and the answer of Jota should have made their way into the Angular-Docs! Thanks guys. – Ilker Cat Oct 20 '20 at 13:45
After this solved my issue, the next console error I got was "Cannot bind to ngIf etc etc" - which I figured was still a `BrowserModule`/`CommonModule` issue. I was importing both `BrowserModule` and `BrowserAnimationsModule`, and I got it to work by just removing `BrowserModule`. Hope this helps someone. – mcheah Dec 16 '21 at 02:53
what if I want to lazy load BrowserAnimationsModule ( to reduce bundle size?) – albanx May 21 '22 at 21:52
How can we create a suggestion to Angular team, so they make this exception more descriptive, I've bee wasting almost one hour till I found this post, checking every place for an unnecessary BrowserModule – Yogurtu Dec 21 '22 at 04:36

score 12 · Answer 2 · answered Aug 09 '18 at 08:40

12

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

answered Aug 09 '18 at 08:40

Vitaliy Bilous

131
1
5

I had no NoopAnimationsModule imported in app.module.ts :). Solved my problem instantly. – Crushnik Apr 08 '21 at 16:06

score 11 · Answer 3 · answered Feb 09 '18 at 16:20

11

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)

answered Feb 09 '18 at 16:20

user9339378

119
1
2

6

This worked for me, but how am I supposed to use CarouselModule and others from other modules outside of AppModule now? – Braelyn B Apr 06 '20 at 04:46
you put it in the module ts files in the "imports" section for the modules that should have access to it @BraelynB – Collin Sep 16 '22 at 15:52

score 10 · Answer 4 · answered Aug 31 '17 at 07:54

10

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.

answered Aug 31 '17 at 07:54

Fatema Saifee

139
8

you can import CommonModule from '@angular/common' – Fatema Saifee Aug 31 '17 at 07:55
Still getting the same error. And you can check only in AppModule I have imported BrowseModule – Er Sushil Aug 31 '17 at 08:01
yeah me too, only imported in app module – Phil Apr 26 '18 at 12:57

score 10 · Answer 5 · edited Jul 18 '19 at 13:24

10

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
  ],

edited Jul 18 '19 at 13:24

Exceptional NullPointer

778
1
9
21

answered Jul 18 '19 at 12:34

Santosh Kadam

1,265
14
14

score 2 · Answer 6 · answered Aug 14 '22 at 13:56

2

I had to move BrowserAnimationsModule from any child components imports

answered Aug 14 '22 at 13:56

Ste

591
1
9
20

score 1 · Answer 7 · edited Nov 23 '18 at 15:48

1

@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

edited Nov 23 '18 at 15:48

Federico Grandi

6,785
5
30
50

answered Nov 22 '18 at 14:29

Brahmmeswara Rao Palepu

189
1
5

1)If we declare BrowserModule in any module other than app module(Duplicate) this error will come.In app module if we import 10 modules or plugins,first we have to import BrowserModule at top and declare in decorates (import:[BrowserModule ]) at top – Brahmmeswara Rao Palepu Nov 23 '18 at 10:58
1

I've edited your answer with that explanation. Please remember to edit your questions and answer instead of just commenting, when possible :) – Federico Grandi Nov 23 '18 at 15:48

score 1 · Answer 8 · edited Jan 07 '19 at 15:47

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.

score 1 · Answer 9 · answered Jul 23 '21 at 19:40

1

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.

answered Jul 23 '21 at 19:40

Victor Pinedo

21
3

score 1 · Answer 10 · answered Sep 01 '21 at 06:11

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!

score 0 · Answer 11 · answered Feb 09 '21 at 17:41

0

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

answered Feb 09 '21 at 17:41

Shubham

125
1
9

score 0 · Answer 12 · edited Apr 13 '21 at 17:35

0

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.

edited Apr 13 '21 at 17:35

Jan

4,974
3
26
43

answered Apr 12 '21 at 10:30

Mira Kamali

70
7

score 0 · Answer 13 · answered Jul 31 '21 at 10:16

0

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

answered Jul 31 '21 at 10:16

heliya rb

682
8
26

score 0 · Answer 14 · answered Jul 27 '23 at 09:16

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.

Lazy Loading BrowserModule has already been loaded

14 Answers14

Linked

Related