How To Run Angular 2 Application Using Visual Studio
In this article, I am going to discuss how we will Run Angular 2 Application Using Visual Studio by pressing F5 key or CTRL + F5. Please read our previous article before proceeding to this article where we discussed the Environment setup Required to develop an application using Visual Studio and then we also discussed how to run an angular 2 application using the command prompt.
While building the solution, if you are getting the following compiler error
Then do the following things. I have taken the solution from the below Stack Overflow link.
Now let’s follow the steps to Run angular 2 application using Visual Studio:
Let’s first set the index.html file as the start-up page for your application. You can find the index.html file within the src folder as shown in the below image.
Now, if you run the angular 2 application by pressing either F5 Key or CTRL+F5 key from Visual Studio then you will get the following message.
But while developing the angular application using visual studio then it is a common thing for us that we should be able to run the angular 2 application using either F5 key or CRTL+F5 key. If you want to so then you need to follow the below steps.
First, Run the application. Then you need to launch the browser developer’s tools. To do so simply press the F12 key which will open the browser developers tool. Once the browser developers tool is opened then click on the Console tab as shown in the below image.
From the above image, it clearly shows that the browser is unable to find some of the files such as styles.css, systemjs.config.js, and main.js in your projects root directory. When we create an angular application, then by default the above files are present within the src folder.
So what we need to do here is, we need to tell the browser to load these files from the src folder instead of the projects root folder. To do this, you just need to open the index.html file and change the base href value as shown in the below image.
Save the above changes that we made in Step1 and then reload the index.html page by pressing the CTRL+F5. Now, you will get another set of 404 resource not found errors as shown in the image below.
If you look at the above console tab, it clearly shows that the shim.min.js, zone.js, and system.src.js files are not found in the src/node_modules/… directory. So what you need to do here is just open the index.html file and include a “/” just before the node_modules as shown in the below image.
Also, you need to add the “/” just before the node_modules in systemjs.config.js file which is present inside the src folder as shown in the below image.
That’s it. we have done with our changes. So save all the changes we did and then reload the index.html page which should display the message as expected without any errors.
The point that you need to remember is, now you will no more be able to run this angular application using the command prompt.
How to make changes reflected automatically in the browser?
To understand this first we need to figure out the problem. So what you need to do here is, just open the app.component.ts file which is present inside the app folder which you can find inside the src folder of your project. Once you open the app.component.ts file then just change the name property value as Angular.
Now save the changes that you had just made and then reload the index.html page, Here you will see that nothing has happened in the page means the changes that you had made is not reflected in the page. Still, it showing the old value of the name property.
But if you run the application again from visual studio by pressing either F5 or CTRL+F5 then only you will be able to see the changes.
What is the problem?
You can find this tsconfig.json file inside the “src” folder. With the above changes, the tsconfig.json file should looks as shown below.
To do this Launch the browser developer’s tools by pressing the F12 key and then click on the Network tab and check the disable cache checkbox as shown in the below image.
Alternatively, you can add the following code in web config file to disable cache for your application.
<location path="app"> <system.webServer> <staticContent> <clientCache cacheControlMode="DisableCache"/> </staticContent> </system.webServer> </location>
Now reload the page and you will see the updated data as expected. In the next article, I will discuss Angular Components in details with examples.
In the next article, I am going to discuss How to Create Angular Project using Visual Studio Code in detail. Here, in this article, I try to explain how to Run Angular 2 Application Using Visual Studio. I hope this article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.