BrowserModule has already been loaded.

[christianwico]

So I went through the installation. When I'm about to access the page that contains the <zoom-area>, all hell breaks loose:

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.
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.
    at new BrowserModule (platform-browser.es5.js:4161)
    at _createClass (core.es5.js:9528)
    at _createProviderInstance$1 (core.es5.js:9500)
    at initNgModule (core.es5.js:9454)
    at new NgModuleRef_ (core.es5.js:10568)
    at createNgModuleRef (core.es5.js:10552)
    at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.es5.js:12854)
    at NgModuleFactory_.create (core.es5.js:13849)
    at module-loader.js:37
    at t.invoke (polyfills.js:3)
    at new BrowserModule (platform-browser.es5.js:4161)
    at _createClass (core.es5.js:9528)
    at _createProviderInstance$1 (core.es5.js:9500)
    at initNgModule (core.es5.js:9454)
    at new NgModuleRef_ (core.es5.js:10568)
    at createNgModuleRef (core.es5.js:10552)
    at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.es5.js:12854)
    at NgModuleFactory_.create (core.es5.js:13849)
    at module-loader.js:37
    at t.invoke (polyfills.js:3)
    at c (polyfills.js:3)
    at Object.reject (polyfills.js:3)
    at NavControllerBase._fireError (nav-controller-base.js:322)
    at NavControllerBase._failed (nav-controller-base.js:310)
    at nav-controller-base.js:365
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (core.es5.js:3890)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at polyfills.js:3

[leonardosalles]

What is your ionic version? Are you using LazyModuleLoad?

[leonardosalles]

Closed due to no user interaction. Please reopen if you still facing this issue.

[big-r81]

Hi,

I'm facing the same issue. Please reopen this. I will give you more info! I'm using lazy loading and I added the ZoomAreaModule in the module.ts of the page.

image.module.ts:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ImagePage } from './image';
import { ZoomAreaModule } from 'ionic2-zoom-area';

@NgModule({
  declarations: [
    ImagePage,
  ],
  imports: [
    IonicPageModule.forChild(ImagePage),
    ZoomAreaModule
  ],
})
export class ImagePageModule {}

My ionic info:

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.18.0
    ionic (Ionic CLI) : 3.18.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.2
    Cordova Platforms  : android 6.3.0 ios 4.5.3
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-deploy : 1.9.2
    Node       : v8.9.0
    npm        : 5.5.1
    OS         : macOS Sierra
    Xcode      : Xcode 9.1 Build version 9B55

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : legacy

[gregavola]

Have the same issue here, please re-open.

[gregavola]

@leonardosalles Any assistance?

[leonardosalles]

Will take a look. Sorry for delay.

[leonardosalles]

Fixed, now need to include BrowserAnimationsModule inside your App module, instructions are in README.md

If anyone still facing this issue, please let me know. Version 1.0.10 is available now in npm.

Thanks.

[leonardosalles]

@big-r81 and @gregavola please don't forget to star the repo if you guys liked the component.