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.

Answer 2

You can follow these steps to create a new latest release Angular application in Visual Studio 2017. Before you start, you will need to have node.js and npm installed on your machine and in your system path.

1. In Visual Studio 2017, create a new ASP.NET Core Web Application with these settings.
2. After creation, right-click on the name of your project and select Unload Project.
3. Right-click on the name of your project and select the option to edit the project.
4. Add the following before the </Project> closing tag.

<Target Name="Build Angular" Condition="'$(Configuration)' != 'Release'" BeforeTargets="Build">
  <Message Text="Angular Build In Progress" Importance="high" />
  <Exec Command="ng build" WorkingDirectory="ClientApp" />
</Target>

5. Right-click on the name of your project and select Reload Project. Save your changes.
6. Open the Startup.cs file in the project and change the Configure method as follows.

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.Use(async (context, next) =>
    {
        await next();
        context.Request.Path = "/index.html";
        await next();
    });

    app.UseStaticFiles();
}

7. Open a CMD prompt in your project directory.

8. Type npm install -g @angular/cli

9. Type ng new <name> --directory ClientApp and then answer the questions about how you want your Angular application configured. Change <name> to the name of your Angular application.

10. In Visual Studio 2017 edit the file \ClientApp\angular.json. Search for the line containing outputPath and change it to "outputPath": "../wwwroot",.

11. In Visual Studio 2017, edit the file \ClientApp\tsconfig.json. Search for the line containing outDir and change it to "outDir": "../wwwroot/out-tsc",.

At this point, you will be able to run and debug your Angular application in Visual Studio 2017. A point to note is that all of the files in your ClientApp folder have a Build Action of None. This means that if you edit them, Visual Studio will not detect the change and rebuild the next time you run. To fix this, change the Build Action as appropriate for each file.

If you have an existing Angular application that you wish to import, skip steps 8 and 9 and, instead, copy your application to a folder called ClientApp in the root of your project.

Answer 3

Not clear whether you are using VS 2017 template for Angular or you just open a Angular CLI project in VS as a web site.

I am working on Angular 6 application created through NPM and Angular CLI

Always open it in VS and code there, but always run from command prompt.

Open command prompt and go the project directory and run command

ng serve -o

Answer 4

There are more than one solution to run Angular CLI based template in Visual Studio.

1. This is one approach. This doesn't use any new angular CLI template. Instead, it uses proxy configuration and mixing MVC and Angular folders in project.

2. This is another approach. It almost has the same approach as #1, but more detailed with steps and screenshots.

3. With .Net core 2.1 There are new CLI based templates to create Angular projects in Visual Studio. More info here

Answer 5

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

Answer 6

If You want to install you can use Install-Package Angular4 -Version 1.1.0 on nuget package manager and follow these steps:

Angular 4
*********

Prerequisites
`````````````
1. Download and Install Node js
2. Install Visual studio 2015 update 3 or above
3. Download and Install TypeScript 2.6.1 for Visual Studio 2015 (https://www.typescriptlang.org/#download-links)

Follow the steps to install package.
````````````````````````````````````
1. Create an new project with empty template and include dependencies for MVC and WebApi to the project
2. Install the package using command 'Install-Package Angular4 -Version 1.1.0'

Follow the steps after package installation
```````````````````````````````````````````
1. Open Node.js Command Prompt
2. Navigate to project location(use commands such as pushd,cd etc)
3. Run the command 'npm install'

It may help you to create a Angular4 project on Visual studio 2017/2015.

Answer 7

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.

Answer 8

Running angular cli scripts in vs 2017 is definitely possible. Therefore running the project is quite straightforward. However visual studio is still not running the project. You are just starting it from visual studio.

One way I know of doing this is to add the script commands to your package.json

for example:

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
}

In fact these scripts are added by default when a project is generated by the angular CLI.

Then calling the script is as simple as .npm [ProjectName] run-script build from the Node.js Interactive window or .npm [ProjectName] run-script start to run the the project.

Answer 9

You should use Typescript project type and, if you use webpack, disable embedded visual studio type script compilation.

Then you've to copy, to the root of your typescript project, the whole angular cli generated directory by "ng new" command.

Now you have intellisense and everything you need to develop. Personally I prefer using cli inside powershell standalone windows application, but the package manager console is the very same powershell, so it's up to you