Running Visual Studio 2017 with Angular 4 and Angular CLI

It looks like Steve Sanderson is working on integrating the CLI into the DotNet Angular template. Add new Angular CLI-based template

Check out this repo Angular-CSharp

This middleware from the repo excites me to no end.

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Home/Error");
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();

            app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller}/{action=Index}/{id?}");
            });

            app.UseSpa(spa =>
            {
                spa.Options.DefaultPage = "/dist/index.html";
                spa.Options.SourcePath = "ClientApp";

                /*
                // If you want to enable server-side rendering (SSR),
                // [1] In AngularSpa.csproj, change the <BuildServerSideRenderer> property
                //     value to 'true', so that the SSR bundle is built during publish
                // [2] Uncomment this code block
                spa.UseSpaPrerendering(options =>
                {
                    options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/main.bundle.js";
                    options.BootModuleBuilder = env.IsDevelopment() ? new AngularCliBuilder(npmScript: "build:ssr") : null;
                    options.ExcludeUrls = new[] { "/sockjs-node" };
                });
                */

                if (env.IsDevelopment())
                {
                    spa.UseAngularCliServer(npmScript: "start");
                }
            });
        }

Great job Steve!! Hopefully it will be ready soon.

Update: Looks like there is a preview available: Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0-preview1-final

Yes, you can run an Angular CLI generated project in Visual Studio 2017. But it needs to be enclosed in a Asp.Net web app, which will serve the Angular app. You can use the following steps:

1. Create a VS project (for example "AngularApp"). Select "Asp.Net Core Web Application" and "Empty" template.

2. Add the following to the < PropertyGroup > in the .csproj file. This keeps VS from transpiling your Typescript. (we will use angular-cli).

   < TypeScriptCompileBlocked > true < /TypeScriptCompileBlocked >
   

3. Open a command prompt in the parent folder to AngularApp and create your app using angular-cli.

   ng new AngularApp
   

4. Edit .angular-cli.json and change "outDir" from "dist" to "wwwroot". This is where the web app expects it.

5. Edit startup.cs and replace the "app.Run …." method with:

   app.UseDefaultFiles();
   app.UseStaticFiles();
   

6. In Task Runner Explorer, bind the Custom build task (ng build) to the "After Build" event.

7. Build and run your app.

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.