How to copy JSON files in to your dist folder without create all directory

Version : Webpack 4

You can use copy-webpack-plugin to copy files or directory from your source directory to dist folder.

For example  I am going to copy all JSON files from inside the app folder to dist/assets/ folder



if you didn’t specify flatten = true , all the directory will create in dist folder like below

Introduction to Service worker

Service Workers  are like a JavaScript files , but they have access to set of features and also it’s run on a separate thread. It will not share the thread where the normal JavaScript code loaded by your html pages runs on. When you register a service worker through your  html page or code initially , it will manage all the pages of a given scope. For example if your service worker is attached to the root of your application , then it’s applicable to all the html pages not only the single html page.

Service worker is also live on even after you closed all the pages in the browser .For example if you are using a mobile phone, even if you close the application , service worker will run as a background process.

What we can do with service workers?

Since it’s background process ,service workers can react all kind of incoming events from your JavaScript code as well as from your server as web push notification and can do something based on that , for example you can return a cached asset , show some notifications to the user and so on.

Type of events which service workers can listen to


By using fetch API you can initiate an http request asynchronously to get some resources across the network. This new API is similar to XmlHttpRequest , but  provides a more powerful and flexible feature set

.then(function(response) {
return response.json();


What you can do with this fetch API in service worker?

By using service worker every http request send via fetch API can intercept like a network proxy.So you can block the request if you want and also you can manipulate the request.

self.addEventListener('fetch', function (event) {



Also  the image tags which point to some image resource in the html will also send a fetch request by the browser. So you can cache the same by intercepting it.

Push Notifications

Every browser like Google Chrome,Mozilla Firefox has its own web push  server , So you can push notifications from your web server to this web push server and then browser will send this notifications to your client. This feature is very useful for a mobile to receive push notifications even if we are not in the application.

How to Register a service worker?

Please note one thing  , the scope of the service worker depends on the location of the file. If the file is  on your root of the application , service workers are applies to all pages in your application. If you can create the file in sub folder , service worker could only control the pages inside of this folder.

  • Create a new file , you can give any name you want . Here I gave sw.js
  • Add your service worker registration code , you can add this in to your start up js file.
if ('serviceWorker' in navigator) {
   .then(function () {
       console.log('Service worker registered!');
   .catch(function(err) {

That’s it .

How Observable works in RxJS?

What is Observable?

Observable is a like a stream which allow to pass zero or more events or values  and you can subscribe each using a callback function.

Why Observables are so important?

In almost all UI when user do some interactions with it you can see the same progression. for example

  • You are listening an event
  • You are making an asynchronous request to the server and may be you are follow up with some transformations or Animations

Observables are capable of modeling all the above things together with a very little code.

In order to understand how Observable works , look at the sample code

var observable = Observable.create(function(observer) {
var sum = 0;
for (var i = 1; i <= 4; i++) {
if (i <= 3) { sum = sum + i;; //You can emit each item from the observable also } if (i === 4) { setTimeout( i => {;

In this sample code, I am running a for loop and emit each value by using , when the value of i become 4 you can see emiting the sum of 3 numbers and exiting the all observable sequence by simple calling observable.complete();

Observables are lazy which means , the above code never executes unless you are subscribing it.

Let’s subscribe the Observable to get each value. I am removing the lambda expression to understand more clearly

next: function(x) {
console.log("got value " + x);
error: err => console.error("something wrong occurred: " + err),
complete: function() {
//when I become 4 it will complete

In the callback function of next , you will get all the values emitted from the Observable sequence including sum as final value and finally execute the complete callback function.

You can simply receive each value like the below syntax also instead of specify next explicitly

observable.subscribe(function(x) {
//here you will get all the value including sum

Let me tell you one more scenario with the same sample by simply commenting one line of code. I am not emitting each value instead I want to emit the sum only from the observable and complete.

var observable = Observable.create(function(observer) {
var sum = 0;
for (var i = 1; i <= 4; i++) {
if (i <= 3) { sum = sum + i; //commented the code } if (i === 4) { setTimeout( i => {;

Now when you subscribe , you will have only one value , that is sum

observable.subscribe(function(x) {
//here you will the sum

Official Documenation to learn about RxJS features

Can’t resolve all parameters in Angular and Webpack

I have recently faced an issue while configuring an Angular 6 application using Webpack 4 , All the dependencies I am injecting in to the component are throwing error.

This error will throw because of various reasons such as circular dependency , not properly spelled @Injectable() decorator etc. You can check the scenarios in the below link

My issue was little bit different , typescript is not resolving decorator> To fix the issue I have set emitDecoratorMetadata=true in tsconfig.json file

Load Angular component styleUrl using web pack

The only change you have to make on your component is , instead of providing the url path using styleUrl , import the file using require and convert to string.

To get the require keyword in typescript, you have to install an npm package called ‘@types/node’
npm install @types/node --save-dev

Also if you want to build and load the scss make sure that you have installed sass-loader and style-loader for web pack

npm install sass-loader --save-dev
npm install style-loader --save-dev

Plugins for webpack

npm install mini-css-extract-plugin --save-dev


rules: [{
test: /\.(sa|sc|c)ss$/,
use: [
loader: MiniCssExtractPlugin.loader,

plugins: [

new CleanWebpackPlugin(['dist']),
new MiniCssExtractPlugin({

filename: '[name].styles.css',
chunkFilename: '[name].styles.css'

what is the importance of putting semicolon always as a best practice in JavaScript

I know probably what you are thinking , we do we need to specify semicolon in my code explicitly? I am getting the right output always without specifying a semicolon also. Well it’s not always right.

Did you think Javascript Engine Syntax parser doesn’t need a semicolon?
Javascript Engine Syntax Parser always need a semicolon. If you will not put a semicolon , the syntax parser will automatically do it for you. Means , wherever syntax parser expects a semicolon , it will put one for you.

Let me give an example the importance of semicolon. Consider the below code

What will be the output of this function? everyone might think output will be {name: "Jameel"}
But it’s not right , the output is undefined .

When you put object literal in the next line of return statement , syntax parser will do a automatic semicolon insertion after the keyword return and jump out of the function.

How can we Fix this issue?
We have to prevent the automatic semicolon insertion by doing like below

Now you will get the output of
{name: "Jameel"}

Is Javascript Object Literal same as JSON?

There are lot of people still confused about Javascript Object versus and JSON.

both are same?

Answer is No . There is a difference between two

Look at the below sample code , both objects are valid javascript object literal.
var employeeObject1 = {
firstName: "Jameel",
lastName: "Moideen"

var employeeObject2 = {
"firstName": "Jameel",
"lastName": "Moideen"

Then what is the difference between JSON?
Answer is very simple. JSON have very strict rule , the property name should enclose with quotes.In the above example employeeObject2 is valid JSON.

Valid JSON
“firstName”: “Jameel”,
“lastName”: “Moideen”

InValid JSON
firstName: “Jameel”,
lastName: “Moideen”

There are some built in function in javascript to convert an array in to JSON , which can use from object to Valid JSON before you send it across the wire.

JSON.stringfy() – Convert an object to valid JSON


JSON.parse() – Convert a string to Javascript Object

{firstName: “Jameel”, lastName: “Moideen”}

JavaScript check null or undefined – Best Practice

Let’s assume I have a variable called ‘a’ , which looks for some value.
var a;
if (a !== undefined && a!== null && a!=='') {
} else {

I have seen lot of developers is trying check condition like above to ensure we are getting the expected value we want.Do we really need to check the value a undefined and null and ?.

No. We don’t need.

Do like below as Best Practice

var a;
if (a) {
} else {

Did you understand what’s Javascript Engine doing under the hood?. In order to understand, Let’s analyze what will be the value return by the Javascript Engine when converting undefined , null and ”(An empty string also). You can directly check the same on your developer console.

You can see all are converting to false , means All these three are assuming ‘lack of existence’ by javascript. So you no need to explicitly check all the three in your code.

Also I want to point out one more thing

What will be the result of Boolean(0)?

Ofcourse false. This will create some bug on your code when 0 become a valid value on your expected result. So please make sure this thing also when you write the code

How to subscribe and unsubscribe the window load event in Rxjs

I know every web programmers are aware of adding window.addeventlistener to ensure some codes are executing once when loading the web page. You can remove the listener by removing using removeEventListener to make avoid the memory leak.

You can do the same thing in a RxJs fashion using take(1). So you no need to unsubscribe it explicitly to avoid the memory leak.
var onWindowLoad=Observable.fromEvent(window,'load');

var onLoadSubscription=onWindowLoad.take(1).forEach(function(event){

How Map and Filter function works in RXJS

In order to understand how Map and Filter works , we can implement our own map function.
Map in Rxjs used for projection, means you can transform the array in to entirely new array. = function(projectionFunction){
var results=[];
this.forEach(function(item) {
return results;

You can see I have written a map function which accepts an anonymous function as a parameter. This will be your function to apply the projection to transform the array. Inside the map function you can see iterating each item in a array , call the project function by passing each item and finally the result of the projection function will push to the results array.

JSON.stringify([1,2,3].map(function(x){return x+1;}))


Filter is used to filter an array based on some condition. You can specify the condition through an anonymous function. The implementation of Filter and Map are almost same only the difference is Map will transform each item in an array and will push to the main array. But the filter will only push to the main array if the condition pass.
var hotelCollection = [
"id": 9999,
"name": "Hotel XXX",
"place": "Wayne",
"rating": 5.0
"id": 8888,
"name": "Hotel YYY",
"place": "WoodCliff Lake",
"rating": 4.5
"id": 7777,
"name": "Hotel ZZZ",
"place": "Franklin Lake",
"rating": 5.0
"id": 6666,
"title": "Hotel PPP",
"place": "Lancester",
"rating": 4.3


var results=[];
this.forEach(element => {
return results;

var collection = hotelCollection.filter(x=>x.rating===5);
Thanks for reading