12

Why does Angular 5 throw this error?

AppComponent.html:2 ERROR TypeError: Cannot read property 'forEach' of undefined

I am working on a proof-of-concept for Angular animations and I'm using the code directly from the site. My component looks like this:

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

@Component({
  selector: 'app-obj-list',
  templateUrl: './obj-list.component.html',
  styleUrls: ['./obj-list.component.css'],
    animations: [

    trigger('myAwesomeAnimation', [
        state('small', style({
            transform: 'scale(1)',
        })),
        state('large', style({
            transform: 'scale(1.2)',
        })),
    ]),
    transition('small => large', animate('100ms ease-in'))

    ]
})
export class ObjListComponent implements OnInit {
  state = 'small';
  constructor() { }
  animateMe() {
     this.state = (this.state === 'small' ? 'large' : 'small');
       }

  ngOnInit() {
  }

}

The line of code that the error references is just the tag to include my component: <app-obj-list></app-obj-list>

I've narrowed it down to the line in the above file: transition('small => large', animate('100ms ease-in'))

When I remove that line, the error goes away. When I leave it in, I get the error:

AppComponent.html:2 ERROR TypeError: Cannot read property 'forEach' of undefined
    at new AnimationTrigger (browser.js:3017)
    at buildTrigger (browser.js:3005)
    at InjectableAnimationEngine.AnimationEngine.registerTrigger (browser.js:5504)
    at eval (animations.js:291)
    at Array.forEach (<anonymous>)
    at AnimationRendererFactory.createRenderer (animations.js:290)
    at DebugRendererFactory2.createRenderer (core.js:15075)
    at createComponentView (core.js:13633)
    at callWithDebugContext (core.js:15041)
    at Object.debugCreateComponentView [as createComponentView] (core.js:14370)

My app.module has the BrowserAnimationsModule so that shouldn't be the issue:

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


import { AppComponent } from './app.component';
import { ObjListComponent } from './obj-list/obj-list.component';


@NgModule({
  declarations: [
    AppComponent,
    ObjListComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I'm trying to follow the code on the angular site as closely as I can. Can someone tell me what I'm forgetting? Is there an import I'm forgetting? Is there a package I need to download? I'm new to Angular and Angular animations and I can't seem to figure this out.

1
  • I'm not using a forEach. That's what confuses me. This is just as bare-bones as I can make it.
    – Knight
    Commented Jan 11, 2018 at 19:30

1 Answer 1

20

If you look closely at the tutorial, the "transition" property of the animation needs to be inside of the array of "trigger":

animations: [
    trigger('myAwesomeAnimation', [
        state('small', style({
            transform: 'scale(1)',
        })),
        state('large', style({
            transform: 'scale(1.2)',
        })), 
        transition('small => large', animate('100ms ease-in'))
    ]) // close the array after the transition
]
3
  • 2
    Oh dang! It's the smallest things that trip us up sometimes! Thanks so much! I can't accept your answer for 8 minutes but I will as soon as I can. You rock!
    – Knight
    Commented Jan 11, 2018 at 19:35
  • 1
    @Knight thanks! Glad that I can help. I could not test it, but if it does not work, just comment here. Commented Jan 11, 2018 at 19:36
  • Worked For Me Thank You
    – Ali Jamal
    Commented Dec 26, 2018 at 15:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.