Develop, Test And Deploy The Angular Project In IIS Using Angular CLI And Visual Studio Code In Few Minutes

Brief of Angular CLI

The Angular CLI is a command line interface tool that can be used to create our Angular project very easily and it is also used to perform a variety of ongoing development tasks such as testing, bundling, and deployment in our same project.

Note

We can also create an Angular project without using Angular cli, if you wish to take a look, here is the link for that,

Step by step Installation Process

Prerequisite

Download visual studio code from this URL.

Just FYI

If you are 32bit user, then click link like below in the visual studio.com to start the download

Once you've downloaded exe, double click that to run



Then follow the simple instructions to install. Once installed successfully follow the below steps,

Step 1 Install node and npm 

To install node, go to this URL

And download the exe depend on your operating system configuration.

Once downloaded, double click the exe and follow the simple instruction. Below are the samples screens for better guidance

Sample screen shots for Node Installation,

After clicked some of the screen, finally you will get the install screen and click install



You will get the progress like below

Once installed, you will get prompt like below, in that   click finish

That’s it node is installed successfully. Now we can go and verify in the normal command prompt by entering these two commands:

1. Node –v
2. Npm –v

You will get a version of that, like the below screen shot,

Additional note
If nodes are not properly installed then, you will see this message in command prompt.

Step 2 Install angular cli using node

To install angular cli, here is the command

Command - npm install -g @angular/cli

We can also use alias,

Command - npm i -g @angular/cli

Note

-g refers that it will install globally

Type the above command and press enter, you will see the  screen like below,



It will take time; it  depends on your system configuration and internet speed.

 Once installed successfully,  you will see screen like below,

Note

You will get some warning, but those are safe to ignore.

To verify the version of Angular CLI installed, execute the following command 

Command

Ng –v



Note

At the time of writing this article, in my system it was installed @angular/cli: 1.4.5. And it may vary in future. 

Step3 Create new project using angular cli

To do that, open Command Prompt and execute the following command. This command creates all the required files and also installs all the required packages.

Command

ng new HelloworldAngularApp

• ng represents Angular CLI
• new for creating a new application
• HelloworldAngularApp is the name of your angular application, you can specify any name you want

Note

Before running this command change the directory in command prompt to where you would like to create a project. In my case I created the project in D:  directory itself. So you change it accordingly

Screen shot for creation



Once it has been successfully installed in all the packages, you will see screen like below,

Step 4 develop and run the project

To develop the project that was created, just open that in visual studio code.

Here is the command to open the project in vs code,

Command -> Code .

Notice there is a single space and a DOT after the word code

Now go to the directory of the project by using the cd command like below screen shot

Note

In case you get the below screen telling you code command is not recognized , it's no problem, just close the command prompt and open it again and run

Once everything is done, it will automatically open your project in visual studio, like the below screen shot

Change the code a little bit by opening the app.component.ts file which is under the src->app like the below screen shot

Just change title from “app” to “Hello world app”

Now run the project using command prompt and see the output

Here is the command to run the project

Command -> ng serve –open

This command builds the application and opens it in our default browser. The flag --open, launches our default browser and runs the application. By default the application runs on port 4200. We can change this port number if required

Screenshots

After completed, here is the Output automatically opened in default browser,

Step 5 Test the project

To test the project , as a first step stop the server by pressing ctrl+C in the command prompt and press y like in the below screen shot,



Now you are able to run the unit test, for that use the following command

Command -> Ng test

Screenshots

It ran the unit test successfully and reported that 2 test cases failed. This is because we have changed the title “app” to “helloworldapp” in our previous steps.

Screenshot for test result



Once the above command has run, it will automatically open the result in chrome like below,

Positive Test Case: [just as a additional check]

To get the positive result, just change the title to original text:

Notice, the moment you changed back to “app” from “helloworldapp” and save it looks like the below screen shot

It will automatically execute the command in the opened command prompt and show the results like below,

It also Opened the success result in chrome like below,

Step 6 deploy the project to the Local IIS

To do the deployment first we need to create the package

 In angular, it will create in dist folder by default.

Here is the command to create that package:

Command -> Ng build –prod

Go the directory of your project in command prompt and run the command like the below screen shot



Once done it will show the screen like below,



And now you can see that “dist” folder is created in our project

You can copy that folder alone separately and paste it in some other place and give that file location to the local IIS.

Let’s put that folder in c directory and refer to the location in IIS

After it's pasted in c directory, if you open and see these are the files available inside the folder.

Ok, Now Open our local IIS ,create website and refer to this folder location for that website.

To open IIS , type inetmgr in start prompt

Once opened the iis server , right click sites which is available in the left side pane and click add new website.

In that add new website dialog box,  provide site name , “dist” folder location and port address like the below screen shot.

Once you've provided all the details, click the ok button like below

Once created click that site and choose content view in the center pane like the below screenshot to just verify our files

Finally open your favorite browser and type the url as Localhost: 8020 to see our most awaited output from local server.

Output

Conclusion

I hope the above information was helpful, kindly share your thoughts or feedback.

If you like to explore Angular concepts more, here are the useful links,

• Step-by-step-creation-of-angular-project-with-typescript-using-visual-studio-2015
• Beginners-guide-for-angular-module
• Angular-component-with-examples
• Angular-directives-with-examples
• Angular Data Binding with examples
• Angular-pipes-with-examples