Sunday, January 12, 2020

scss vs sass

Hey Guys !

This is a blog on the differences between SCSS and SASS.

I keep updating this blog , so let me know your thoughts in the comments section .

Whenever I used to work on CSS I always find something missing , for example I was not able to reuse an existing class and I had to create a new class even though almost all the properties were same . Apart from inheritance there where other missing features like usage of variables . Sass provides the missing features in css .

Lets discuss on the first feature , the variables .

In sass I can use a variable name $bgcolor,

/* Use the variables */
body {
    background-color$bgcolor;
   
  }

But since I have not defined it I will get an error

 ERROR in ./src/app/app.component.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

    background-color: $bgcolor;
                     ^
      Undefined variable.
  ╷
3 │     background-color: $bgcolor;
  │                       ^^^^^^^^
  ╵
  stdin 3:23  root stylesheet


So I need to define a variable like this ,

$bgcolor : lightblue;
     
Make sure you add $ symbol in the beginning of the variable name otherwise you will get an error message as


bgcolor : lightblue; ^ Expected "{". ╷ 3 │ bgcolor : lightblue; │ ^ ╵
     



Thanks !.

error TS2307: Cannot find module '@angular/fire'.


Hi Guys ,

This blog is about the error :

error TS2307: Cannot find module '@angular/fire'.





ErrorLog :

ERROR in src/app/app.module.ts(5,35): error TS2307: Cannot find module '@angular/fire'.
src/app/app.module.ts(6,40): error TS2307: Cannot find module '@angular/fire/firestore'.
src/app/app.module.ts(7,39): error TS2307: Cannot find module '@angular/fire/auth'.
src/app/app.module.ts(23,47): error TS2339: Property 'firebase' does not exist on type '{ production: boolean; }'.
src/app/auth.service.ts(2,33): error TS2307: Cannot find module '@angular/fire/auth'.
src/app/auth.service.ts(3,27): error TS2307: Cannot find module 'firebase/app'.

Thanks !

Saturday, January 11, 2020

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,Inputfrom '@angular/core';

@Directive({
  selector: '[appContent]'
})
export class ContentDirective {
  @Input()  innerHtml ;
  constructor(private elElementRef) { }
  
  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 { HeadersHttpResponse } from '@angular/http';

@Injectable({
    providedIn: 'root'
  })
export class AppService {

    constructor(private httpHttp ) { }

    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 !



Sunday, December 1, 2019

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!

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 .

ec2-user@ec2 Permission denied