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

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