Attempted import error: does not contain a default export

Hi Guys ,

This blog is about the error
Attempted import error: does not contain a default export .

The full error log is as follows :

Attempted import error: './header/Top.js' does not contain a default export (imported as 'Top').

If you are new to react development you may face this error .

The fix is simple , in the component file you need to add the export statement like the one below .

export default Top;

Thanks !

'React' is not defined no-undef

Hi Guys ,

This blog is about the error
'React' is not defined no-undef .

The full error log is as follows :

./src/header/Top.js
  Line 3:26:  'React' is not defined                   no-undef
  Line 9:14:  'React' must be in scope when using JSX  react/react-in-jsx-scope

Search for the keywords to learn more about each error.

This is an error we face when we create a new component in react js .

The fix is quite simple .

check if you have missed the import for react , if it is missing add the following line at the top of your file .

import React from 'react';

Thanks !

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 !

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 !