Angular animations doesnt work inside lazy loaded modules

animation

#1

I can’t get angular animations to work inside lazy loaded modules, what am I doing wrong?

https://github.com/thegermin8er/nsngTabs


#2

ping @sebawita perhaps?


#3

@johnnydoe you are missing NativeScriptAnimationsModule, you need to it the imports for each lazy loaded module that uses Angular Animations.
Just like you have it here

so your offside.module.ts should look something like this:

import { NgModule } from "@angular/core";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { Routes } from "@angular/router";

// ----- ANIMATIONS MODULE IMPORT ------
import { NativeScriptAnimationsModule } from "nativescript-angular/animations";

import { OffsideComponent } from "./offside.component";

const routes: Routes = [
    { path: "", component: OffsideComponent}
];

@NgModule({
    imports: [
      NativeScriptRouterModule.forChild(routes),
// ----- ANIMATIONS MODULE IMPORT ------
      NativeScriptAnimationsModule
    ],
    exports: [NativeScriptRouterModule]
})
export class OffsideRoutingModule { }

I hope this helps.


#4

I ran into this same issue earlier today and some of the great folks on the Slack Channel helped me out. As of NS Angular 4.2, this isn’t the correct guidance.

With 4.2, the NativeScriptAnimationsModule should only be imported into your root app module. Each of your lazy modules must import NativeScriptCommonModule. There are more details here:


Animations not working in a lazy loaded module
#5

is this the solution?


#6

@vtjon is right! The solution also holds true for NativeScript Angular 5.0 :slight_smile:


#8

I’m using NativeScript Angular 5 and importing “NativeScriptAnimationsModule” and “NativeScriptCommonModule” in my submodules and app.module, but still not working in my subpages,only works on app.component.html :disappointed_relieved:

This’s my project test on github : https://github.com/walderpinheiro/hello-world-nativescript