Unexpected value AnimatesDirective

[Deleted user]

Using Angular-cli, when I try to build for production, the following error pops up..

ERROR in Unexpected value 'AnimatesDirective in app.module.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'

[Fabian Leutgeb]

I haven't tested this package with the angular-cli yet. Also, did you have a look at angular/angular-cli#4551 and angular/angular-cli#5596?

With the given error I cannot really say if css-animator causes it, or if it's something else. Probably you can post your app.module.ts, so I can have a look.

[Fabian Leutgeb]

I just checked https://angular.io/docs/ts/latest/cookbook/aot-compiler.html and it seems this package is not AoT compliant. I will push an update asap, in the meantime you can use it without ahead of time compilation. I'll keep you posted.

[Fabian Leutgeb]

Just in case, please post you app.module.ts anyway.

[Deleted user]

Hi,

Here's a snippet of my module file.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AnimatesDirective, AnimationService } from 'css-animator';
import { MaterializeModule } from 'angular2-materialize';

import { AnswerDirective } from './directives/answer.directive';
import {
    .
    .
    NotificationComponent
} from './components';

import {
    .
    .
    LocalizationService
} from './services';

@NgModule({
    imports: [
        CommonModule,
        MaterializeModule
    ],
    declarations: [
        .
        .
        AnimatesDirective,
        AnswerDirective,
        NotificationComponent
    ],
    providers: [
        .
        .
        LocalizationService
    ]
})
export class TesterModule {
}

[Fabian Leutgeb]

I've finally added support for AOT compilation with Angular as of v2.1.0 of this package.

When you upgrade to the latest version of css-animator, please make sure to just import AnimatorModule and that you don't add AnimatesDirective to the declarations, or AnimationService to the providers of your module. It should look similar to the code below.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AnimatorModule } from 'css-animator';
// ...

@NgModule({
  imports: [
    CommonModule,
    AnimatorModule,
    // ...
  ],
  declarations: [
    // ...
  ],
  providers: [
    // ...
  ],
})
export class MyModule { }

[Deleted user]

awesome! much appreciated.