Angular 7 Lazy Loading

Question

I removed all BrowserModule, and BrowserAnimationsModule from my project and still have this 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

I use Material UI in my project and Angular 7

I use this packages

    "@angular/animations": "^7.1.4",
    "@angular/cdk": "^7.2.1",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/http": "^7.2.0",
    "@angular/material": "^7.2.1",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "@ngrx/effects": "^7.2.0",
    "@ngrx/store": "^7.2.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@nicky-lenaers/ngx-scroll-to": "^2.0.0",
    "@types/echarts": "^4.1.8",
    "angular-font-awesome": "^3.1.2",
    "angular-gridster2": "^7.1.0",
    "ant-design-palettes": "^1.1.3",
    "bootstrap": "^4.2.1",
    "chart.js": "^2.7.3",
    "compass-mixins": "^0.12.10",
    "core-js": "^2.5.4",
    "echarts": "^4.2.1",
    "echarts-wordcloud": "^1.1.3",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "mitra-packages": "^0.2.5",
    "ng-pick-datetime": "^7.0.0",
    "ng2-dragula": "^2.1.1",
    "ngx-avatar": "^3.2.0",
    "ngx-clipboard": "^11.1.9",
    "ngx-color-picker": "^7.3.0",
    "ngx-echarts": "^4.1.0",
    "ngx-google-places-autocomplete": "^2.0.3",
    "ngx-infinite-scroll": "^7.1.0",
    "ngx-masonry": "^1.1.2",
    "ngx-quill": "^4.5.1",
    "pusher-js": "^4.3.1",
    "quill": "^1.3.6",
    "rxjs": "~6.4.0",
    "rxjs-compat": "^6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"

What should I do for this error?

Thanks in advance

either you have them in multiple places or its related to the materialUI — mast3rd3mon, Apr 15 '19 at 15:19
Make a nice search inside the code of your project to see where other places is that ```BrowserModule``` I think you would find it somewhere — RadW2020, Apr 15 '19 at 15:20
@mast3rd3mon I had them in App.module and Shared. Module and I replaced all of them with Common Module — Bishoy Bisahi, Apr 15 '19 at 15:21
I have also faced the same issue once and it turned out that one of the libraries was causing this. Can you please show package.json. — Kushagra Saxena, Apr 15 '19 at 18:02
@BishoyBisahi I cannot find anything by just seeing the packages. I just wanted to make sure that if you are using the same package in which I experienced the same issue but that is not the case. I would suggest that you go through the docs of all packages and see if all are compatible with Angular 7 and upgraded. — Kushagra Saxena, Apr 16 '19 at 11:13
You should only import BrowserModule in AppModule. I'm guessing you've declared it in your SharedModule.only import BrowserModule and the animations one once (app and not shared) — Jaykant, Apr 16 '19 at 11:31
Check this https://stackoverflow.com/questions/45975675/lazy-loading-browsermodule-has-already-been-loaded/45979219 — , May 18 '19 at 13:46

score 0 · Answer 1 · answered May 22 '19 at 10:31

You should only import BrowserModule and BrowserAnimationsModule in AppModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms'; 
import { AppComponent } from './app.component'; 

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

All module child you should only import CommonModule

import { NgModule } from '@angular/core';
import {CommonModule} from '@angular/common';
import { FormsModule } from '@angular/forms'; 
import { ChildComponent } from './child.component'; 

@NgModule({
  imports:      [ CommonModule, FormsModule ],
  declarations: [ ChildComponent ]
})
export class ChildModule { }

Angular 7 Lazy Loading

1 Answers1