Kendo-angular: Angular 4: You need to import BrowserAnimationsModule

Created on 5 Apr 2017  路  6Comments  路  Source: telerik/kendo-angular

The Kendo UI components use the Angular animations framework.

The animations have been moved to a separate module in Angular 4.0.0 RC.1.
This requires the BrowserAnimationsModule to be registered in your application root module:

npm install --save @angular/animations
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
//       ^^^^^^^^^^^^^^^^^^^^^^^

import { GridModule } from '@progress/kendo-angular-grid';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [BrowserModule, BrowserAnimationsModule, GridModule]
//                                ^^^^^^^^^^^^^^^^^^^^^^^
})
export class AppModule {
}
Breaking Change buttons charts date-inputs dialog dropdowns grid layout popup scrollview upload

Most helpful comment

@OndraZizka the *AnimationModules should be loaded only in AppModule, make sure they're not included in SharedModule or any other sub-modules

All 6 comments

thank you sir!

https://github.com/angular/angular/tree/4.0.0/packages/platform-browser
look for the specific module and you will have the path :)
didn't help that on ang docs said it was experimental lol
https://angular.io/docs/ts/latest/api/platform-browser/animations/index/BrowserAnimationsModule-class.html

We have a multimodule app, and adding *AnimationModule re-loads BrowserModule and fails with:

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:4109)
    at ReportsModuleInjector.createInternal (module.ngfactory.js? [sm]:1)

Any suggestions on what to do with that?

@OndraZizka the *AnimationModules should be loaded only in AppModule, make sure they're not included in SharedModule or any other sub-modules

@tsvetomir Thanks, I put it into our CoreModule which is loaded only in AppModule, seems to work.

@tsvetomir - What if i have it is included in one of the npm packages? My scenario I am trying to use ngx-uploadcare-widget in my ionic/angular(lazyloading) project and it is throwing an error saying browsermodule has already been loaded. Can you please help in advising an approach to solve this please.

@Chethannp I see that the issue is being discussed in uploadcare/ngx-uploadcare-widget#12 - let me know if we can do anything in particular for the Kendo UI packages.

Was this page helpful?
0 / 5 - 0 ratings