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 .