Getting browser module error for lazyloading in angular

Question

I am implementing lazyloading, it is working fine in one component where the material is not used in that component. In other HTML I have used angular material so I am importing angularmaterial module into my shared module, at that time I am getting below 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.

app.module.ts

import { NgModule, ApplicationModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgHttpLoaderModule } from 'ng-http-loader';
import { MatInputModule, MatFormFieldModule,  } from '@angular/material';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgSelectModule } from '@ng-select/ng-select';

import { SharedModule } from './_shared/shared.module';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [
    AppComponent,

  ],
  imports: [
   CommonModule,
    BrowserModule,
     BrowserAnimationsModule,
    ApplicationModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    HttpClientModule,
    NgHttpLoaderModule.forRoot(),
    NgbModule,
    SharedModule

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

in sharedModule:

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

import { ChartModule } from 'angular-highcharts';
import { DaterangepickerModule } from 'angular-2-daterangepicker';
import { FilterDataPipe } from '../_pipes/filter-data.pipe';
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
import { NgxDatetimeRangePickerModule } from 'ngx-datetime-range-picker';
import { AngularMaterialModule } from '../angular-material.module';
import { CommonModule } from '@angular/common';

@NgModule({
  imports:[

    DaterangepickerModule,
    ChartModule,
    NgMultiSelectDropDownModule,
    NgxDatetimeRangePickerModule,
    AngularMaterialModule,
  ],
  declarations: [
    FilterDataPipe,
  ],
  exports: [
    CommonModule,
    DaterangepickerModule,
    FilterDataPipe,
    NgMultiSelectDropDownModule,
    NgxDatetimeRangePickerModule,
     AngularMaterialModule
  ]
})
export class SharedModule {}

in my cardsModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Cardscomponent } from './cards.component';
import { SharedModule } from '../_shared/shared.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { CardsRoutingModule } from './cards-routing.module';
import { CardDetailsComponent } from './card-details/card-details.component';

@NgModule({
  imports: [
   CommonModule,
    SharedModule,
    FormsModule,
    ReactiveFormsModule,
    CardsRoutingModule,
    NgbModule

  ],
  declarations: [Cardscomponent,CardDetailsComponent]
})
export class CardsModule { }

Up to cardsComponent, it is working fine when I require angular material in carddetailscomponent I am getting browser module error. Any solution, please

angular material module

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

import {
  MatCardModule,
  MatSidenavModule,
  MatButtonModule,
  MatToolbarModule,
  MatListModule,
  MatIconModule,
  MatMenuModule,
  MatDatepickerModule,
  MatTabsModule,
  MatFormFieldModule,
  MatSnackBarModule,
  MatInputModule,
  MatChipsModule,
  MatCheckboxModule,
  MatSortModule,
  MatStepperModule,
  MatSelectModule,
  MatSlideToggleModule,
  MatTableModule,
  MatExpansionModule,
  MatTooltipModule,
  MatButtonToggleModule,
  MatProgressSpinnerModule,
  MatDialogModule,
  MatRippleModule,
  MatRadioModule
} from '@angular/material';

@NgModule({
  declarations: [],
  imports: [
    MatRadioModule,
    //CommonModule,
    MatCardModule,
    MatSidenavModule,
    MatButtonModule,
    MatToolbarModule,
    MatListModule,
    MatIconModule,
    MatMenuModule,
    MatDatepickerModule,
    MatTabsModule,
    MatFormFieldModule,
    MatSnackBarModule,
    MatInputModule,
    MatChipsModule,
    MatCheckboxModule,
    MatSortModule,
    MatStepperModule,
    MatSelectModule,
    MatSlideToggleModule,
    MatTableModule,
    MatExpansionModule,
    MatTooltipModule,
    MatButtonToggleModule,
    MatProgressSpinnerModule,
    MatDialogModule,
    MatRippleModule,
    CdkTableModule
  ],
  exports: [
   // CommonModule,
    MatRadioModule,
    MatCardModule,
    MatSidenavModule,
    MatButtonModule,
    MatToolbarModule,
    MatListModule,
    MatIconModule,
    MatMenuModule,
    MatDatepickerModule,
    MatTabsModule,
    MatFormFieldModule,
    MatSnackBarModule,
    MatInputModule,
    MatChipsModule,
    MatCheckboxModule,
    MatSortModule,
    MatStepperModule,
    MatSelectModule,
    MatSlideToggleModule,
    MatTableModule,
    MatExpansionModule,
    MatTooltipModule,
    MatButtonToggleModule,
    MatProgressSpinnerModule,
    MatDialogModule,
    MatRippleModule,
    CdkTableModule
  ]
})
export class AngularMaterialModule { }

C33t · Answer 1 · 2020-03-12T15:12:15.347

Can you show me what's imported in the AngularMaterialModule file?

My guess is that AngularMaterialModule is importing BrowserModule again (maybe BrowserAnimationsModule too):

import { BrowserModule } from "@angular/platform-browser"; // SHOULD NOT BE IMPORTED AGAIN

The error doesn't show up before lazy loading because duplicated imports are ignored in eagerly loaded modules. That's why your SharedModule can be loaded in your AppModule without throwing an error.

If my guess is right, you need to delete the faulty import(s) in AngularMaterialModule.

EDIT:

If AngularMaterialModule is not the culprit, you should check if any of your imported modules imports one of the following modules:

BrowserModule, BrowserAnimationsModule, HttpModule or HttpClientModule

source: https://stackoverflow.com/a/45979219/10428517

And if you can't find any faulty import, you can still try this odd suggestion: https://github.com/angular/angular-cli/issues/5684#issuecomment-349821403

Updated angular material module, browser module is not present. — Sudhir, Mar 12 '20 at 02:30

score 0 · Answer 2 · answered Mar 13 '20 at 12:04

I would suggest to review your modules Imports / Exports. For Example the error says :

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.

However in your AppModule you import CommonModule and BrowserModule - I am not 100% sure, but I think you need to import BrowserModule once in AppModule, and use CommonModule only in other Modules import. So you probably can delete CommonModule from AppModule.

import { NgModule, ApplicationModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgHttpLoaderModule } from 'ng-http-loader';
import { MatInputModule, MatFormFieldModule,  } from '@angular/material';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgSelectModule } from '@ng-select/ng-select';

import { SharedModule } from './_shared/shared.module';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [
    AppComponent,

  ],
  imports: [
   CommonModule,
    BrowserModule,
     BrowserAnimationsModule,
    ApplicationModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    HttpClientModule,
    NgHttpLoaderModule.forRoot(),
    NgbModule,
    SharedModule

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

What I can also see, in your SharedModule you export CommonModule without importing it, but I think you have deleted this Module before posting this question... But there is another problem, your SharedModule does not have any declarations, so why does it need CommonModule? if you want to provide CommonModule to other modules with SharedModule, than you don not need to import CommonModule together with SharedModule, as you do in your CardsModule...

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

import { ChartModule } from 'angular-highcharts';
import { DaterangepickerModule } from 'angular-2-daterangepicker';
import { FilterDataPipe } from '../_pipes/filter-data.pipe';
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
import { NgxDatetimeRangePickerModule } from 'ngx-datetime-range-picker';
import { AngularMaterialModule } from '../angular-material.module';
import { CommonModule } from '@angular/common';

@NgModule({
  imports:[

    DaterangepickerModule,
    ChartModule,
    NgMultiSelectDropDownModule,
    NgxDatetimeRangePickerModule,
    AngularMaterialModule,
  ],
  declarations: [
    FilterDataPipe,
  ],
  exports: [
    CommonModule,
    DaterangepickerModule,
    FilterDataPipe,
    NgMultiSelectDropDownModule,
    NgxDatetimeRangePickerModule,
     AngularMaterialModule
  ]
})
export class SharedModule {}

To find an error, you better review all your modules and check where you have repetition and probably small collapses.

Also try to do ng build and ng build --prod it might show some errors

Alternatively post all your modules (including routing modules) here so we can review them.

Getting browser module error for lazyloading in angular

2 Answers2