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    .

can't bind to 'formcontrol' since it isn't a known property of 'input'

Hi Guys ,

In this blog I will share information related to error :
can't bind to 'formcontrol' since it isn't a known property of 'input'.

The complete error log is as follows :

Error in /turbo_modules/@angular/compiler@8.0.0/bundles/compiler.umd.js (2479:21)

Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'. ("<label>
Name:
<input type="text" [ERROR ->][formControl]="status">
</label>"): ng:///AppModule/StatusComponent.html@2:21
No provider for NgControl ("<label>
Name:
[ERROR ->]<input type="text" [formControl]="status">
</label>"): ng:///AppModule/StatusComponent.html@2:2

You may get this error while using angular reactive forms .

To fix this error add RectiveFormsModule in the inports array .

@NgModule({

  imports:      [ BrowserModule, FormsModule ,ReactiveFormsModule ],

  declarations: [ AppComponent, HelloComponent, StatusComponent ],

  bootstrap:    [ AppComponent ]

})

export class AppModule { }

Checkout the video on how to fix this error .

Hope this fixes the issue ! Thanks .

ERROR in node_modules/firebase/index.d.ts(4336,38): error TS1005: ';' expected.

Hi Everyone ,

This blog is about the error " ERROR in node_modules/firebase/index.d.ts(4336,38): error TS1005: ';' expected."




I have faced this error while adding firebase to angular .
The solution is to update the typescript to version 3.1.3 .