BrowserModule causing a problem for lazy loading with Ionic 3.4.x, so here's a fix

[chorpler]

Not sure how this will affect people who aren't using lazy loading, but BrowserModule apparently really doesn't like being loaded twice, and since you have to load it in your app.module.ts file for an Ionic 3.x app when lazy loading is configured, you get "BrowserModule already loaded" errors when using components like this, which also import BrowserModule.

To fix this, I had to modify the /src/module.ts file, going from:

import { NgModule } from '@angular/core';
import { MULTI_PICKER_DIRECTIVES } from './directives';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
    exports: [MULTI_PICKER_DIRECTIVES],
    declarations: [MULTI_PICKER_DIRECTIVES],
    imports: [
        BrowserModule
    ]
})
export class MultiPickerModule {

} 

to the following:

import { NgModule } from '@angular/core';
import { MULTI_PICKER_DIRECTIVES } from './directives';
import { CommonModule } from '@angular/common';

@NgModule({
    exports: [MULTI_PICKER_DIRECTIVES],
    declarations: [MULTI_PICKER_DIRECTIVES],
    imports: [
        CommonModule
    ]
})
export class MultiPickerModule {

}

I could submit a pull request if anybody else has this problem. The example app still runs, and it doesn't seem to be using lazy loading, so I don't think this change breaks things for people who aren't using lazy loading, but I'm not 100% sure.

Edit: I forgot that I also used npm outdated and npm update to update all the dependencies and devDependencies in /package.json and /example/package.json to the latest versions, mainly to ensure that it would still work with my project which had the latest versions of angular and ionic (which apparently is what started giving me lazy loading problems in the first place). I'm not sure if that's necessary or not for things to work after you change the module.ts file, but I thought I should mention it in case anybody else is having this problem.

Edit again: Whoops, somehow I pasted over the original code snippet with the updated one. Fixed now.

[raychenfj]

Hi @chorpler,

Your two code snippets are exactly same, can you update it ?

[chorpler]

Whoops! Sorry about that. Updated it. Also, I reformatted the second one to look a little more similar to the first one, so the actual changes hopefully stand out more now.

[liugogal]

hi!
the code will be like this: `@NgModule({ exports: [MULTI_PICKER_DIRECTIVES], declarations: [MULTI_PICKER_DIRECTIVES], imports: [ CommonModule, FormsModule, ReactiveFormsModule ] }) export class MultiPickerModule {

} `

[chorpler]

I'm curious, what did you need the Forms and ReactiveForms modules for?

[alexnu]

Hi, I also need this fix after the latest Ionic update.

[raychenfj]

Version 2.1.0 is released to fix this.

BTW, I import IonicModule based on this blog.