After following the Angular 2 Documentation for Animations (link to https://angular.io/docs/ts/latest/guide/animations.html), I successfully migrated my project to Angular 4.0.1. Below is a snippet from my 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"
Modifying system.config.js
'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
... // other module configurations here
Adjusting 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 ],
...
})
In my custom component file, I imported Angular animations as well:
import { trigger, state, style, animate, transition } from '@angular/animations';
This is how my view template looks like with animation usage:
<div class="container" [@containerState]="showContainer">
...
</div>
Encountering an error message in the console:
Error: Uncaught (in promise): Error: Found the synthetic property @containerState. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.
Despite removing the synthetic property, everything works fine, though Angular Animations remain unusable.
Any suggestions? Note that angular-cli is not in use!
Update made in 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 configurations here
])
]
})
Currently resolving...
The issue was resolved by deleting the entire node_modules folder and performing a fresh installation. A peculiar situation indeed! Considering upgrading another Angular 2.x application to Angular 4.x.