Showing posts with label angular. Show all posts
Showing posts with label angular. Show all posts

Thursday, April 2, 2020

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    .

Saturday, November 30, 2019

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 .

Saturday, October 19, 2019

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 .

ec2-user@ec2 Permission denied