Tuesday, 21 February 2023

Angular custom npm library create and publish to npmjs artifactory

 

Create AngularLibrary from existing angular project

Assumtion : ng new Angular-App (created working with sample boiler plate code)

ng g library ngx-logger-matui

It create angular-app-> project -> ngx-logger-mat

Src src/lib ng-packagr.json package.json ... ..

to add dependent npm libraries go to angular-app->project->src->lib

npm i @material-ui, ....

then add it ng-package export ,

components, service, pipes, models we can use it.


Publish AngularLibrary

Sing up at npmjs.com

email, user, pwd are required, Email has to be verify with link

Build AngularLibrary

Angular app or workspace do angular library build

ng build ng-logger (pacakge.json at library ngs-logger-gn) to avoid naming convention

go to workspace->dist->library

cmd:>npm publish username : npmjs username &password: ****,& email public: mandate to get OTP to publish

Wednesday, 15 February 2023

What are the Different Types of Errors in JavaScript? - 7 Types of error, 3 pieces of info, to handle try, catch finally

 

  • There are 7 types of JavaScript errors: Syntax error, Reference Error, Type Error, Evaluation Error, RangeError, URI Error and Internal Error.
  1. Syntax error - The error occurs when you use a predefined syntax incorrectly.
const func = () =>
console.log(hello)
}

Output:

}
^
SyntaxError: Unexpected token }

In the above example, an opening bracket is missing in the code, which invokes the Syntax error constructor.

  1. Reference Error - In a case where a variable reference can't be found or hasn't been declared, then a Reference error occurs.
console.log(x);

Output:

console.log(x);
            ^
ReferenceError: x is not defined
  1. Type Error - An error occurs when a value is used outside the scope of its data type.
let num = 15;
console.log(num.split("")); //converts a number to an array

Output:

console.log(num.split("")); //converts a number to an array
                ^
TypeError: num.split is not a function
  1. Evaluation Error - Current JavaScript engines and EcmaScript specifications do not throw this error. However, it is still available for backward compatibility. The error is called when the eval() backward function is used, as shown in the following code block:
try{
  throw new EvalError("'Throws an error'")
}catch(error){
  console.log(error.name, error.message)
}

Output:

EvalError 'Throws an error'
  1. RangeError - There is an error when a range of expected values is required, as shown below:
const checkRange = (num)=>{
  if (num < 30) throw new RangeError("Wrong number");
  return true
}

checkRange(20);

Output:

 if (num < 30) throw new RangeError("Wrong number");
                ^
RangeError: Wrong number
  1. URI Error - When the wrong character(s) are used in a URI function, the error is called.
console.log(decodeURI("https://www.educative.io/shoteditor"))

console.log(decodeURI("%sdfk"));

Output:

console.log(decodeURI("%sdfk"));
            ^
URIError: URI malformed
  1. Internal Error - In the JS engine, this error occurs most often when there is too much data and the stack exceeds its critical size. When there are too many recursion patterns, switch cases, etc., the JS engine gets overwhelmed.
switch(condition) {
 case 1:
 ...
 break
 case 2:
 ...
 break
 case 3:
 ...
 break
 case 4:
 ...
 break
 case 5:
 ...
 break
 case 6:
 ...
 break
 case 7:
 ...
 break
 ... up to 500 cases
 }

Output: Its output will be like InternalError.

What are Errors in JavaScript?

JavaScript code can encounter different errors when it is executed. Errors can be caused by programming mistakes, incorrect input, or other unforeseeable events.

Errors in programming can be divided into two types. These are:

  1. Program Error: - In this case, the program might need to handle this error through its error handlers. An example could be network disconnection, timeout error, etc.
  2. Developer Error: - The programmer has caused an error. It can be a syntax error, a logical error, a semantic error, etc.

The try...catch...finally Statement

Exception handling has been added to JavaScript in recent versions. Exceptions are handled by JavaScript's try...catch...finally construct and throw operator.
Syntax

try {
    // statements
    [break;]
    } 

catch ( e ) {
    // statements if an exception occurs
    [break;]
    }

finally {
    // statements that always execute regardless of an exception occurring
    }
   

Examples of errors in JavaScript

After the try block, there must either be a catch block or a finally block (or both). The catch block is executed if an exception occurs in the try block. After try/catch, finally is executed unconditionally. Let's see an example:

function myFunc() {
    var num = 50;
     try {
            alert("Value of variable a is : " + num );
        }
    catch ( error ) {
        alert("Error: " + error.description );
        }
    finally {
        alert("Finally, block will always execute!" );
        }
}
myFunc()

Output: The below statements will be shown in an alert box.

Value of variable a is : 50
Finally, block will always execute!

The throw statement can be used to raise built-in exceptions or your customized ones.

function myFunc() {
    
    var num1 = 100;
    var num2 = 0;
               
    try {
        if ( num2 == 0 ) {
            throw( "Divide by zero error." ); 
        } else {
            var num3 = num1 / num2;
        }
    }
    catch ( e ) {
        alert("Error: " + e );
    }
}
myFunc()

Output: The below statement will be shown in an alert box.

Error: Divide by zero error.

The onerror() Method

In JavaScript, error handling was simplified by the onerror event handler. If there is an exception on the page, the error event will be fired on the window object.

window.onerror = function () {
    alert("An error occurred.");
}

There are three pieces of information provided by the onerror event handler that identifies the error's exact nature.

Error message − A message similar to the one displayed by the browser when an error occurs. URL − The file where the error occurred.

Line number− This is the line number in the URL where the error occurred.

Conclusion

  • An error is a statement that interferes with the proper operation of the program.
  • There are 7 types of JavaScript errors: Syntax error, Reference Error, Type Error, Evaluation Error, RangeError, URI Error and Internal Error.
  • Errors in Javascript can be handled using the try...catch...finally construct as well as the throw operator.
  • The article allows you to easily identify the source of an error, whether it occurs in your terminal or browser.
REf: https://www.scaler.com/topics/types-of-errors-in-javascript/

Thursday, 9 February 2023

Feb 2023 Part -2

1. Full Row edit in Ag-grid


https://blog.ag-grid.com/full-row-editing-ag-grid-committing-changes-button-click/


2

https://dev.to/antoniojuniordev/5-tips-to-improve-backend-integration-react-with-axios-b3p

3.

https://dev.to/hy_piyush/10-github-repositories-you-must-know-as-a-javascript-developer-f5d

3.2

https://github.com/mbeaudru/modern-js-cheatsheet


4. react testing 

https://www.freecodecamp.org/news/8-simple-steps-to-start-testing-react-apps-using-react-testing-library-and-jest/#:~:text=Note%20%E2%80%93%20you%20can%20also%20use,confidence%20they%20can%20give%20you.%22


5.https://github.com/rautio


6. show image before upload

https://www.kindacode.com/article/react-show-image-preview-before-uploading/


Thursday, 2 February 2023

Feb 2023 Blog post,

1. React Basename router, Router, Nested Router

2. https://www.kindacode.com/cat/react/ React working models.

3. https://www.kindacode.com/cat/docker/ - Docker

4. useAxios, useFetch interceptors React 

 https://dev.to/hy_piyush/10-github-repositories-you-must-know-as-a-javascript-developer-f5d

Monday, 30 January 2023

Jan 2023 Blogs list

1.React Folder structure :

 https://dev.to/fpaghar/folder-structuring-techniques-for-beginner-to-advanced-react-projects-30d7

constants folder structures


2.React Full Screen - With and without npm library

3.MFE :

module federation:

https://betterprogramming.pub/how-to-use-webpack-module-federation-in-react-70455086b2b0

https://github.com/rautio/micro-frontend-demo


single spa

https://ogzhanolguncu.com/blog/migrating-cra-to-micro-frontends-with-single-spa

4. find the text partial in search array - AutoComplete custom React

5. custom Accordion

6. custom Tabs with nav bar

7. useFetch

8. useAxios

9. React Testing library

10. jest testing for react App

11. https://www.examtopics.com/exams/amazon/aws-certified-solutions-architect-associate-saa-c02/view/2/

12. js code https://github.com/wesbos/JavaScript30








Wednesday, 7 December 2022

React Testing library & Jest configuration - eslint, prittier, husky

 https://dev.to/ivadyhabimana/setup-eslint-prettier-and-husky-in-a-node-project-a-step-by-step-guide-946


https://dev.to/ivadyhabimana/setup-jest-and-react-testing-library-in-a-react-project-a-step-by-step-guide-1mf0

Tuesday, 16 August 2022

Typescript - type = {}, interface { }


|

Ref: https://stackoverflow.com/questions/51131898/what-is-the-difference-between-type-and-class-in-typescript/51132333#51132333

Description | Type | Interface |

|---------------------------------------------------------|------|-----------|
| Describe functions                                      |   ✔  |     ✔     |
| Describe constructors                                   |   ✔  |     ✔     |
| Describe tuples                                         |   ✔  |     ✔     |
| Interfaces can extend                                   |   ≈  |     ✔     |
| Classes can extend                                      |   ✘  |     ✔     |
| Classes can implement                                   |   ≈  |     ✔     |
| Divide another one of its own kind                      |   ✔  |     ≈     |
| Create a union with another one of its own kind         |   ✔  |     ✘     |
| Be used to create mapped types                          |   ✔  |     ✘     |
| Be mapped over with mapped types                        |   ✔  |     ✔     |
| Expands in error messages and logs                      |   ✔  |     ✘     |
| Be completed                                            |   ✘  |     ✔     |
| Be recursive   

Friday, 17 June 2022

NG13- timer Rxjs operator is equalent to setTimeout in JS, interval for setInterval

 import { timer } from "rxjs";


@Component({ 

})


export class AppComponent implements OnInit{

    progressBar: boolean =  true;  // Show spinner / progress bar initlly


constructor(){

const source = timer(2000); // 2 milli secs

const subscribe = source .subscribe( hide => this.hideProgress() } );

hideProgress(){

this.progressBar = false; // call the hide spinner

}

}

}



 import { interval } from "rxjs";


Friday, 13 May 2022

NG13 - Accessing the Previous URL in Angular

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

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
previousUrl: string = null;
currentUrl: string = null;
constructor(private router: Router) {}

ngOnInit() {
this.router.events.pipe(
filter((event) => event instanceof NavigationEnd)
).subscribe((event: NavigationEnd) => {
this.previousUrl = this.currentUrl;
this.currentUrl = event.url;
});
}
}

Making it globally accessible

To make the previous url available outside of your app.component.ts file you can create a service with an observable that your components can subscribe to that holds your previous url value. Use the Angular CLI to create the service ng g s shared/url. In the url.service.ts file, you should create both a previousUrl behavior subject and observable.

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
@Injectable()
export class UrlService {
private previousUrl: BehaviorSubject<string> = new BehaviorSubject<string>(null);
public previousUrl$: Observable<string> = this.previousUrl.asObservable();
...

Using a behavior subject gives you the ability to set the previous url directly. You can then set the value of the observable to the behavior subject. You will notice that I have kept the behavior subject private, this is so we can restrict access to the behavior subject. Next, in the url.service.ts file you can create a method to set the value of the previous url.

setPreviousUrl(previousUrl: string) {
this.previousUrl.next(previousUrl);
}

This sets the value of the behavior subject, which subsequently also sets the value of the observable. Now, any components that subscribe to the previous url observable will receive the updated value!

Subscribing to the previous URL observable

In any component you want to access the previous url, you need to import the url service, define it in its constructor, subscribe to the previous url observable, and set it as a variable in the component.

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { UrlService } from '../shared/url.service';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
previousUrl: string = '';
constructor(private urlService: UrlService) { } ngOnInit(){
// Or subscribe to the previous url observable here
this.urlService.previousUrl$
.subscribe((previousUrl: string) => {
this.previousUrl = previousUrl
});
}
}
Ref: https://jacobneterer.medium.com/accessing-the-previous-url-in-angular-32cf97bec3ce

KISS, DRY, SOLID, YAGNI — A Simple Guide to Some Principles of Software Engineering and Clean Code

1 — KISS (Keep It Simple, Stupid)  Simplicity triumphs over complexity. Direct and clear codes are better for developing, maintaining, and s...