Issues and Resolutions

Issue 1: Error: Unable to resolve animation metadata node #undefined

Details: This issue occurs if you have not defined animations in the component correctly

Issue with this code:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    'divState', [
      state('normal', style({
        'background-color': 'red',
        transform: 'translateX(0)'
      })),
      state('highlighted', style({
        'background-color': 'blue',
        transform: 'translateX(100px)'
      })),
      transition('normal => highlighted', animate('100ms ease-in')),
    ]
  ]
})
export class AppComponent {
  title = 'app';
  state = 'normal';

  animate() {
    this.state === 'normal' ? this.state = 'highlighted' : this.state = 'normal';
  }
}

To resolve this issue, correct the animations metadata in the component description (add the missing trigger({}))

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('divState', [
      state('normal', style({
        'background-color': 'red',
        transform: 'translateX(0)'
      })),
      state('highlighted', style({
        'background-color': 'blue',
        transform: 'translateX(100px)'
      })),
      transition('normal => highlighted', animate('100ms ease-in')),
    ])
  ]
})
export class AppComponent {
  title = 'app';
  state = 'normal';

  animate() {
    this.state === 'normal' ? this.state = 'highlighted' : this.state = 'normal';
  }
}