CODEWITHSUNDEEP
angular
born2net
born2net

Reputation: 24973

Can't get Angular4 to work with lazy loading and animation (using BrowserAnimationsModule)

Can't get Angular4 to work with lazy loading and animation. So I loaded BrowserAnimationsModule in my app-modules.ts and animation works fine in main module, but not in lazy loaded modules, so I tried to load BrowserAnimationsModulein my shared module as I get an error of : Unhandled Promise rejection: BrowserModule has already been loaded. If you need access to common directives

This is my shared module:

var sharedComponents = [Tabs, Tab, Infobox, Sliderpanel, Slideritem, SlideritemContent, PanelSplitMain, PanelSplitSide, PanelSplitContainer, ListToArrayPipe, FormatSecondsPipe, MatchBodyHeight, ScreenTemplate, BlurForwarder, DraggableList, AddContent, Loading,
    FontSelector, BlockPropContainer, BlockPropCommon, BlockPropHtml, BlockPropClock, BlockPropWeather, BlockPropInstagram, BlockPropJsonPlayer, BlockPropJsonItem, LivePreview, LocationMap, MediaPlayer, FilterModelPipe, SvgIcon,
    BlockPropScene, BlockPropCalendar, BlockPropSheets, BlockPropTwitter, BlockPropVideo, BlockPropImage, BlockPropLabel, BlockPropMrss, BlockPropLocation, BlockPropRss, BlockPropDigg, BlockPropFasterQ, BlockPropCollection, BlockPropQR, BlockPropYouTube, JsonEventGrid];

@NgModule({
    imports: [CommonModule, FormsModule, HttpModule, JsonpModule, ReactiveFormsModule, ContextMenuModule, ChartModule, ReactiveFormsModule, ColorPickerModule, DropdownModule, RadioButtonModule, SimpleGridModule, Ng2Bs3ModalModule, AgmCoreModule, VgCoreModule, VgControlsModule, VgOverlayPlayModule, VgBufferingModule],
    exports: [CommonModule, FormsModule, HttpModule, JsonpModule, ReactiveFormsModule, ContextMenuModule, ChartModule, ColorPickerModule, DropdownModule, RadioButtonModule, SimpleGridModule, Ng2Bs3ModalModule, AgmCoreModule, VgCoreModule, VgControlsModule, VgOverlayPlayModule, VgBufferingModule, ...sharedComponents],
    entryComponents: [ScreenTemplate],
    declarations: [...sharedComponents]
})

export class SharedModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: SharedModule,
            providers: []
        };
    }
}

and as soon as I add to it the BrowserAnimationsModule it will error out,

ideas?

Thanks,

Sean

Upvotes: 2

Views: 1716

Answers (1)

Victor Alves
Victor Alves

Reputation: 7636

It seems you can only import BrowserModule or BrowserAnimationsModule and it has to be in the root app module as explained in this github issue: https://github.com/angular/angular/issues/15579

The solution is to import BrowserAnimationsModule only on app.module

Just posting here if anyone stumbles across the same issue

Upvotes: 2

Related Questions