Running Visual Studio 2017 with Angular 4 and Angular CLI

Question

Is it possible to run an Angular CLI generated project in Visual Studio 2017?

I tried generating a Hello World application and Visual Studio 2017 can't run it.

ng new HelloWorld 

I opened the folder as a website and clicked start. Has anyone else solved this?

The "Loading..." just runs forever.

Answer 1

The answer is no, VS cannot run an Angular CLI project. There's no .*proj file in an Angular CLI application that would tell VS what to do with the project. Without that, VS is just a code editor.

If you want to develop/debug an Angular 4 application, then you may want to consider another IDE other than VS. I use VS Code. With it, you can press the F5 key to start debugging an Angular CLI application with little effort. You still need ng serve from the CLI to run the application during development.

Now, if you really want to use VS 2017 to do Angular development, then you could take a look at the SPA Templates that are available for VS.

These are a mix of ASP.Net Core MVC, and Angular 4. They aren't too bad. But, they do have a little of the Microsoft way mixed in. What I mean by that is, the templates don't necessarily follow what is know to be Angular conventions; they've been Microsoft'ed. If you can get past that, then these can be a good thing.

I have played around with them, and I can honestly say they work well to get something up and running quickly. If VS is your IDE of choice, that can be nice. Of course, the Angular CLI cannot be used with these. At least, I haven't tried that, and I probably wouldn't.

Hope this helps you out.

UPDATE (2017-08-17)

Visual Studio 2017 15.3 now has the Angular template built in as a regular Web Application .NET Core project template. React and React/Redux templates are included too. You must choose ASP.NET Core 2.0 in the New ASP.NET Core Application dialog in order to see the templates as a choice. If you choose 1.1 or lower, the templates will not show in the list of options.

UPDATE (2018-02-23)

Microsoft has delivered some new templates for use with ASP.NET Core 2.0 applications. You can find more details about them here. The new Angular template includes support for the Angular CLI. So, if you are familiar with the CLI, then this should feel a little bit more like home. This means you can to the ng g commands to generate code with this new template. SSR is still a part of the template, although you have to do a little coding to make it work, not a big deal.

UPDATE (2018-08-28)

As is pointed out in a comment on this answer, as of the time of this update, the ASP.NET Core Angular template still produces a project with Angular 5 (5.2.0, to be exact). I have successfully used the ng update command available in the Angular CLI version 6+ to update the ClientApp (the Angular part of the solution) that the ASP template builds from version 5 to 6. For this to work you will need to have the Angular CLI version 6 installed globally on your machine (npm i -g @angular/cli).

I know based on commits in the template repository that MS has added support for Angular 6. When that will be available widely is unknown to me. Look for a future update when that comes out!

UPDATE (2019-10-03)

VS 2019 with the latest updates (v16.3.2) now includes Angular 8.0.0 in with the Angular template. It also includes the .NET Core 3.0 SDK.