Learn Angular in 10 days – Day 4 – Execution Trick

This part of the series is for those people who are tired of executing two command prompts. One for TypeScript compiler and one for web server.

Step 1 – Install Concurrently

“Concurrently” is a node module which will let us execute multiple commands concurrently.

Open command prompt and execute the following command:

npm install concurrently –g

Now in command prompt, we will be able to demonstrate multiple commands concurrently.

Let’s test the same. Execute the following command:

concurrently "dir" "dir"

As you can see, we are trying to execute “dir” command more than once using “concurrently” module.

We will get the following output.

As you can see, it is displaying “dir” command output two times.

Step 2 – Create a Batch File

Now create a file called “AngularStart.bat” in the root folder of our Angular Project and put the following contents inside it.

concurrently "tsc -p "TypeScriptFiles" -w"

As you know, “-w” flag will start TypeScript compiler in watch mode. “-p” command lets us specify the location of our root TypeScript folder (folders where our tsconfig.json exists).

Note: Here, specifying “-p” flag is a must, because “tsconfig.json” file is located in some other folder (in TypeScriptFiles folder) and we are executing “tsc” command in some other folder (in root folder of our Angular project).

Step 3 – Execute the Batch File

Double click the batch file.

As you can see, executing batch file simply started TypeScript compile in watch mode.

Step 4 – Add Web Server Behavior

So far, we have not taken the real advantage of “concurrently” module. Change batch file content to the following:

concurrently "tsc -p "TypeScriptFiles" -w" "lite-server"

Step 5 – Execute and Test

Execute the batch file once again. You will notice both TypeScript compiler and lite-server executing concurrently.

It will also launch the browser and executes our application.

Now on, after every lab, you can simply execute the batch file and get the output.

Stay tuned for the next part.

Summary

In case of any queries, you can drop a comment. I will try my best to reply at the earliest.

CodeProject