Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

BrowserModule has already been loaded Error

I've updated my application to RC6 and now i keep getting this error:

zone.js:484 Unhandled Promise rejection: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module...

I'm using lazy loading and my application is broken up in to a lot of lazy loaded modules. However in RC5 everything worked fine.

The only change I've managed to find in the changelog for RC6 is this:

compiler: throw descriptive error meesage for invalid NgModule providers

But since i haven't seen any errors in RC5 this probably doesn't apply here.

I'm kind of out of ideas so any help is greatly appreciated.

like image 302
Filip Lauc Avatar asked Sep 02 '16 07:09

Filip Lauc


People also ask

What is BrowserModule?

BrowserModule provides services that are essential to launch and run a browser application. BrowserModule also re-exports CommonModule from @angular/common , which means that components in the AppModule also have access to the Angular directives every application needs, such as NgIf and NgFor .

Is BrowserModule required?

BrowserModule is required by default by any new web based angular application. It should be imported from @angular/platform-browser.

Where can I import my BrowserModule?

For applications that run in the browser, import BrowserModule in the root AppModule because it provides services that are essential to launch and run a browser application. BrowserModule 's providers are for the whole application so it should only be in the root module, not in feature modules.

What is BrowserModule withServerTransition?

withServerTransition()link Configures a browser-based app to transition from a server-rendered app, if one is present on the page. static withServerTransition(params: { appId: string; }): ModuleWithProviders<BrowserModule>


1 Answers

I think you are using 'NoopAnimationsModule' or 'BrowserAnimationsModule', Which already contain 'BrowserModule' and loading your module lazily. SO the solution is Replace the BrowserModule with 'NoopAnimationsModule or 'BrowserAnimationsModule' in your 'app.module.ts'.

import { Router } from '@angular/router'; import { AdminsModule } from './admins/admins.module'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; //import { BrowserModule } from '@angular/platform-browser'; import { NgModule,OnInit } from '@angular/core'; import { AppComponent } from './app.component';  @NgModule({     declarations: [         AppComponent,     ],     imports: [     //BrowserModule,     NoopAnimationsModule,     FormsModule ],     providers: [],     bootstrap: [AppComponent] }) export class AppModule {} 
like image 80
Shivam Mishra Avatar answered Sep 21 '22 15:09

Shivam Mishra