Opening angular 2 cli app in visual studio 2017

10
votes

I have created Angular 2 application using Angular 2 CLI. I want to open that application in Visual Studio 2017 and run it from Visual Studio. For this I have followed following steps in Visual Studio.

  1. In Visual Studio New Porject -> Node.js -> From Existing Node.js Code
  2. I followed the steps after clicking on "rom Existing Node.js Code"

After following above steps it asked me to insert startup script. Where can I find startup script in angular 2 CLI application? By default it is server.js in node.js application in visual studio.

2
angularangular-clivisual-studio-2017

2 Answers

15
votes

Using the existing Node.js project template did not work for me either. I opened the project as a folder (File > Open > Folder) then selected the project's folder. This will open the project and VS2017 seems to understand that it's a project and that it's from a git repo as well. The project will open in the Solution Explorer and then it's possible to save the .sln file for the project. By default VS knows what the different file types are and highlights and collapses them correctly, etc.

I am using git for Windows so I use the bash shell that comes with that to run npm install and npm start/ng serve. You can use the Node.js Interactive Window (Tools > Node.js Tools > Node.js Interactive Window) to run .npm install and .npm start, but if you close VS2017 without stopping ng serve then it will run in the background and you need to close it using the Task Manager (Ctrl + Alt + delete > Start Task Manager). NOTE: you will see several node.exe processes. This is why I start the Angular CLI server outside of VS2017.

3
votes

go to below path:

file -> Open -> Web Site

Select folder which you need to load in VS. click ok. you will be able to load angular 2+ projects in VS.

in order to run you need Node CLI. you need to run ng serve --open command in order to run angular 2+ application.