angularvisual-studio-2015angular2-cli

Angular 2 cli integration in visual studio 2015


I am trying to create an angular 2 application in visual studio 2015 using angular2 cli setup.

I have done the following steps to setup the project

  1. Execute the following command that installs the cli

    npm i -g angular-cli

  2. Execute the following command that creates file and folder structure

    ng new projectname

  3. Execute the following command that builds the project

    ng serve

By default the angular 2 app is served on port 4200. So when I execute the http://localhost:4200 , I can see the index.html page is served on the browser. I understand that it is served via ng server and not IIS. Please correct me if I am wrong. If i copy the folder and file structure and include in my visual studio solution and run it, I see that visual studio uses its own port. Even if I set the port to 4200 in the project properties and try and execute http://localhost:4200 , it doesent work. I believe it is because it is now being hosted by IIS and IIS has no clue of this application. Could somebody tell me how to go about setting it up in real time scenario

I am basically trying to make changes in the html and execute the code using visual studio 2015 editor. I dont any changes reflected


Solution

  • A view of your file structure would be helpful. It sounds like you're simply using Visual Studio as an IDE. If that is correct, I wouldn't worry about using the green play button. You have to run task for it to build, so Task Runner will be your friend. That or just open up console and do you commands from there.

    I personally prefer just using an IDE, like visual studio code, but if you must use VS, then I recommend the link below.

    Here is a good reference for running an Angular 2 project in Visual Studio without putting it in an ASP.NET project