Angular 2-animationer fungerar inte

Följande Angular 2-dokumentation för animationer (https://angular.io/docs/ts/latest/guide/animations.html) har jag migrerat till Angular 4.0.1. Här är en del av min package.json:

"@angular/common": "~4.0.1",
"@angular/compiler": "~4.0.1",
"@angular/core": "~4.0.1",
"@angular/forms": "~4.0.1",
"@angular/http": "~4.0.1",
"@angular/platform-browser": "~4.0.1",
"@angular/platform-browser-dynamic": "~4.0.1",
"@angular/router": "~4.0.1",
"@angular/animations": "~4.0.1",
"typescript": "^2.2.2",
"zone.js": "^0.8.4"

system.config.js

  '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
  '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
  '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
  '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
  '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
  '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule, Title } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
@NgModule({
  imports:      [ BrowserModule, BrowserAnimationsModule, appRouting, FormsModule ],
...
})

Inne i min anpassade komponent importerade jag också Angular-animationen:

import { trigger, state, style, animate, transition } from '@angular/animations';

Och min vy (extern vy tilldelad av templateUrl!) ser ut så här:

<div class="container" [@containerState]="showContainer">
...
</div>

Problemet är: jag får alltid ett konsolfelmeddelande:

Fel: Ouppfångat (i löfte): Fel: Hittade den syntetiska egenskapen @containerState. Vänligen inkludera antingen "BrowserAnimationsModule" eller "NoopAnimationsModule" i din applikation.

När jag tar bort denna syntetiska egenskap fungerar allt bra, men jag kan inte använda Angular Animationer.

Några idéer? Jag använder inte angular-cli!

Uppdatera container.component.ts

import { Component, OnInit, OnDestroy, EventEmitter, HostListener, Input, Output } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';
@Component({
    templateUrl: '...',
    selector: '...',
    animations: [
        trigger('containerState', [
            state('hide', style({transform: 'translateY(-102%)'})),
            transition('hide => show', [
                animate(500, style({transform: 'translateY(0)'}))
            ]),
            transition('show => hide', [
                animate(500, style({transform: 'translateY(-102%)'}))
            ])
        ])
    ]
})

För närvarande körs det...

Vad gjorde jag? Raderade hela node_modules-mappen och körde en ren installation. Efter det fungerar allt bra. Väldigt konstigt! Jag kommer att försöka uppgradera en annan Angular 2.x-app till Angular 4.x

Svar #1

Angular2 betraktar prefixet '@' som att det representerar en 'syntetisk lyssnare' som bör åsidosättas av animationsmodulen du anger. Du använder dock själv @-symbolen, <div class="container" [@containerState]="showContainer">

Försök ta bort '@' och se om det fungerar för dig.

Svar #2

Jag hade samma fel när jag felaktigt angav animations-egenskapen i @Component(...)-direktivet. Jag hade något som:

@Component(
...
animations: [ 
   { provide: Class, useValue: ... }
]
...
)

Kontrollera att du inte har något annat än animation i animations-arrayen. Hoppas det hjälper någon.

Relaterade artiklar