Learn Angular in 10 days – Day 4 – Execution trick

C8

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.

Complete Series

  1. Day 1 – Part 1
  2. Day 1 – Part 2
  3. Day 2
  4. Day 3
  5. Day 4 – Part 1
  6. Day 4 – Execution trick
  7. Day 4 – Part 2
  8. Day 4 – Part 3
  9. Day 5 (Coming soon)
  10. Day 6 (Coming soon)
  11. Day 7 (Coming soon)
  12. Day 8 (Coming soon)
  13. Day 9 (Coming soon)
  14. Day 10 (Coming soon)

Step 1– Install Concurrently

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

Open command prompt and execute 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 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 following contents inside it.

concurrently "tsc -p "TypeScriptFiles" -w"

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

Note: Here specifying “-p” flag is 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 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 next part.

Summary

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

We are Mumbai based software development + Corporate Training firm. We have specialization in .net stack, Mean stack and PHP stack. For any enquiry visit www.justcompile.com or drop an email at SukeshMarla@Gmail.com

Comments

comments

%d bloggers like this: