cannot find module '@angular/animations'.

Hi Guys ,

This blog is about the error
cannot find module '@angular/animations'.

You may get this error while using angular animation .

Below are the few steps which will help you fix this error .

Check if the angular animation module is  present in your application .

If angular animation is not present install angular animation using the following command .
npm install @angular/animations

After that import BrowserAnimationsModule in appmodule.ts file .

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

Hope this helps in resolving the issue .

Load Dynamic Html in Div using Angular

Hi Guys ,

In this blog we will discuss on how to load a dynamic HTML into a div .
Lets assume the source of the HTML is a service .
In angular , you can perform this using a user defined directive and ng-template .

Let us first create a custom directive .

import { Directive , ElementRef,Input} from '@angular/core';

@Directive({

  selector: '[appContent]'

})

export class ContentDirective {

  @Input()  innerHtml ;

  constructor(private el: ElementRef) { }

  

  ngOnInit() {

    this.el.nativeElement.innerHTML = this.innerHtml;

    console.log(this.innerHtml);

   }

   ngAfterContentInit(){

    console.log(this.innerHtml);

   }

   ngAfterViewInit(){

    console.log(this.innerHtml);

   }

}

Now , let us create a service to fetch the response HTML .

import { Injectable } from "@angular/core";

import { Headers, Http, Response } from '@angular/http';

@Injectable({

    providedIn: 'root'

  })

export class AppService {

    constructor(private http: Http ) { }

    loadContent(){

        return this.http

        .get('http://localhost:8990/loadFile/b5510b8d-c766-48bd-808d-54c2e6e6d1c2');

    }

}

The next step is to use the custom directive in the component file using ng-template .

<app-header></app-header>

<ng-template [ngIf]="loadcontent" >

    <div  appContent [innerHtml]="content" >

    </div>

<div>

    Footer

</div>

</ng-template>

Hope this helps .Thanks for reading !

Error: Cannot find control with name:

Hi Guys ,

In this blog I will share information related to error :

Error: Cannot find control with name:

The complete error log is as follows :


StatusComponent.html:2 ERROR Error: Cannot find control with name: 'sname'
    at _throwError (shared.ts:140)
    at setUpControl (shared.ts:36)
    at FormGroupDirective.addControl (form_group_directive.ts:132)
    at FormControlName._setUpControl (form_control_name.ts:278)
    at FormControlName.ngOnChanges (form_control_name.ts:207)
    at checkAndUpdateDirectiveInline (provider.ts:208)
    at checkAndUpdateNodeInline (view.ts:429)
    at checkAndUpdateNode (view.ts:389)
    at debugCheckAndUpdateNode (services.ts:431)
    at debugCheckDirectivesFn (services.ts:392)


You may get this error while using reactive Forms in Angular
Lets look at the code which caused this error .

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

import { FormControl , FormGroup} from '@angular/forms';

@Component({

  selector: 'app-status',

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

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

})

export class StatusComponent implements OnInit {

  statusForm = new FormGroup(

    {

      fname : new FormControl('')

    }

  );

  

  constructor() { }

  ngOnInit() {

  }

  updateStatus() {

     

  }

}

<p>   {{statusForm.fname}} </p>

<form [formGroup]="statusForm">

<label>

  First Name 

  <input type="text"  formControlName="fname">

Second Name 

  <input type="text"  formControlName="sname">

</label>

 

</form>

You can see we have two form controls in the HTML but only one form control in Controller .



Lets fix this error . We need to add another FormControl to a FormGroup .

The working code is as below .

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

import { FormControl , FormGroup} from '@angular/forms';

@Component({

  selector: 'app-status',

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

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

})

export class StatusComponent implements OnInit {

  statusForm = new FormGroup(

    {

      fname : new FormControl(''),

       sname : new FormControl('')

    }

  );

  

  constructor() { }

  ngOnInit() {

  }

  updateStatus() {

     

  }

}

Hope this helps . Thanks !

TypeError: Cannot convert undefined or null to object

Hi Guys ,

In this blog I will share information related to error :

TypeError: Cannot convert undefined or null to object.

The complete error log is as follows :

main.ts:13 TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at FormGroup._forEachChild (model.ts:1526)
    at FormGroup._setUpControls (model.ts:1531)
    at new FormGroup (model.ts:1258)
    at new StatusComponent (VM2760 status.component.ts:16)
    at createClass (provider.ts:268)
    at createDirectiveInstance (provider.ts:136)
    at createViewNodes (view.ts:303)
    at callViewAction (view.ts:636)
    at execComponentViewsAction (view.ts:559)
eval @ main.ts:13



You may get this error while using reactive Forms in Angular
Lets look at the code which caused this error .

statusForm = new FormGroup();

You can see the formGroup object is created without passing any parameter to it .

Lets fix this error . We need to add a FormControl to a FormGroup .

The working code is as below .

statusForm = new FormGroup(

    {

      fname : new FormControl('')

    }

  );

Hope this helps .Thanks!

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 .

JSX expressions must have one parent element.

Hi Guys ,


This blog is about the error " JSX expressions must have one parent element.

Let's look at the erroneous code .

import React from 'react';

export default ({ name }) => <h1>Hello {name}!</h1>

<input type="text" placeholder="enter asset"/>;

You can see there are two elements <h1> and <input> .
The error is because react does not allow multiple component as a parent component . To fix this issue we can put the two elements under single parent component , like a <div> .

Let's fix the code .

import React from 'react';

export default ({ name }) => <div><h1>Hello {name}!</h1>

<input type="text" placeholder="enter asset"/>  </div>;

The error is gone . Hope this helps , Thanks !

Checkout this error in youtube .

Let me know if you still face error in the comments below .

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 .