Angular CLI – Angular 2 With TypeScript And Gulp

Setting up Angular projects is hectic work, from managing the project files, file structure, automation using Gulp, to managing NPM packages and much more.

Angular CLI makes it easy to create Angular based projects right out the box without going through all the hectic processes.

Node Package Manager

First of all,  you need to download and install Node Package Manager from Node’s Website. If you are using Windows operating system, you just need to download Node’s Windows Installer (.msi) package file and run it.

Project Files and NPM Packages

After installing Node Package Manager, create a folder, which will hold your project files and NPM packages. Fire-up CMD in the folder you just created. In my case, it is “AngularCLIApp” and run the command given below.

npm install

If Node Package Manager is not installed globally, you need to install Angular CLI from NPM. Go ahead in your CMD Window and type the command given below, while staying in your project directory.

npm install angular-cli

Wait until the installation completes.

Now, to create a project through Angular CLI, type the command given below.

ng new <Application_Name>

replace <Application_Name> with the name that you want to give your Application. In my case, it is “MyTestApp”.

You’ll see the project with the necessary files are created. All your Application code will go in /src directory. Now, you need to install Gulp NPM package. Simply run the command given below.

npm install gulp

After all these installations, now open up this project in Visual Studio code or any other editor, which you prefer. Open up the “package.json” file and replace “start”: “ng serve” with “start”: “ng serve && start gulp”.

Now, create a file named “gulpfile.js” to write your Gulp tasks.

For the test purposes, you can paste the code given below in your gulpfile.

var gulp = require('gulp');

gulp.task('default'function() {

    console.log("Hi! I'm Gulp default task!");


Running Application and Gulp

In order to run your Application, you first need to initialize your Application and run the Server to run that Application. In your CMD Window, run the command given below.

ng init <Application_Name>

After initializing the Application, you need to fire up the Server to run your Application. To do this, simply run the command given below.

ng serve –port <Port_Number>

Do not forget to move your CMD control to your app directory.

Open up your Browser and type “http://localhost:<Port_Number>” to see your Application in action.

Now, whenever you make any changes in your Application, it will automatically reflect in the running application. Now, to run Gulp, simply run the command given below in CMD, where your “gulpfile.js” exists.

start gulp

Now, you can write your project in /src and without bothering about Angular boilerplate structuring.

Ahmed Khateeb

Computer Scientist, Former intern at Microsoft, Developer and Blogger. "Tech Enthusiast".

20 thoughts on “Angular CLI – Angular 2 With TypeScript And Gulp

  1. Heya i’m for the primary time here. I came across this board and I in finding It truly helpful & it helped me out a lot. I’m hoping to give one thing again and aid others such as you helped me.

  2. Hello just wanted to give you a quick heads up. The text in your article seem to be running off the screen in Firefox. I’m not sure if this is a formatting issue or something to do with web browser compatibility but I thought I’d post to let you know. The layout look great though! Hope you get the problem solved soon. Thanks

  3. I am really enjoying the theme/design of your website. Do you ever run into any web browser compatibility issues? A few of my blog audience have complained about my site not working correctly in Explorer but looks great in Firefox. Do you have any solutions to help fix this problem?

  4. whoah this blog is magnificent i love reading your posts. Keep up the great work! You realize, a lot of people are searching round for this information, you can help them greatly.

  5. Thanks on your marvelous posting! I truly enjoyed reading it, you’re a great author.I will always bookmark your blog and definitely will come back later in life. I want to encourage that you continue your great writing, have a nice weekend!

  6. I’m impressed, I have to admit. Seldom do I come across a blog that’s equally educative and engaging, and without a doubt, you’ve hit the nail on the head. The problem is something not enough folks are speaking intelligently about. I am very happy I stumbled across this in my hunt for something regarding this.

  7. Great beat ! I would like to apprentice while you amend your web site, how can i subscribe for a blog website? The account aided me a acceptable deal. I had been a little bit acquainted of this your broadcast offered bright clear idea

  8. An outstanding share! I’ve just forwarded this onto a friend who has been conducting a little homework on this. And he in fact bought me lunch due to the fact that I found it for him… lol. So allow me to reword this…. Thanks for the meal!! But yeah, thanx for spending some time to talk about this issue here on your web site.

  9. Definitely imagine that that you stated. Your favourite reason appeared to be on the internet the easiest thing to bear in mind of. I say to you, I definitely get annoyed even as people consider concerns that they plainly don’t understand about. You managed to hit the nail upon the top as smartly as defined out the whole thing without having side-effects , people could take a signal. Will probably be again to get more. Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *