ReferenceError: trigger is not defined

Error Blog 

Hi Guys ,

This blog is about the error ReferenceError: trigger is not defined

Problem Statement

unable to start angular application

Error Details 

error Log

ERROR DETAILS 

preview-00cf61ef72af9a6058a4b.js:1 ReferenceError: trigger is not defined
    at eval (VM506 travel.component.ts:22)
    at Object.eval (VM506 travel.component.ts:39)
    at eval (VM506 travel.component.ts:42)
    at eval (VM506 travel.component.ts:43)
    at eval (<anonymous>)
    at Qt (webcontainer.998f80711f26df414e0.js:15)
    at webcontainer.998f80711f26df414e0.js:15
    at U (webcontainer.998f80711f26df414e0.js:15)
    at webcontainer.998f80711f26df414e0.js:15
    at Object.eval (VM490 app.module.ts:15)

Error Code 

You will face this error if you are using angular animations .

import { Component, OnInit } from '@angular/core';

@Component({

  selector: 'app-travel',

  templateUrl: './travel.component.html',

   animations: [

   trigger('pageAnimations', [

  transition(':enter', [

    query('.inner-section, .menu-area > li', [

      style({ transform: 'translateY(-100px)', opacity: 0 }),

      stagger(50, [

        animate('300ms ease-out', style({ transform: 'none', opacity: '*' }))

      ])

    ])

  ])

])

    ],

  styleUrls: ['./travel.component.css']

})

export class TravelComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  }

}

Solution

body parser should be installed 

Code Changes 

add the following import in your component.ts file .

  

        

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

         

OUTPUT

works 

Thanks for reading . Let me know your thoughts in the comments below    .