29

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.

1

9 Answers 9

49

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.

5
  • Any blogs available for built in angular template- Visual Studio 2017 15.3?
    – k11k2
    Aug 18, 2017 at 13:31
  • 2
    There is a little about the templates in the Core 2.0 announcement, but nothing detailed. If I run across any, I will post it here. Aug 18, 2017 at 14:17
  • do you know if these templates for .NET Core 2 have repos in GitHub? I ask because when I update the angular dependencies in project.json to latest, it breaks debugging, so I was curious to see if this issue is experienced by others Oct 9, 2017 at 19:05
  • 1
    @Neurothustra I think this is the repo: Microsoft.DotNet.Web.Spa.ProjectTemplates Oct 9, 2017 at 19:33
  • by default this template chooses angular 5. Make sure to update package.json file if you are expecting angular 6.
    – Zeus
    Aug 28, 2018 at 19:25
11

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.

2
  • I had trouble getting ng build to run from via Task Runner (using Gulp), but it works if you put it in as a Post Build event in the project properties. The only problem is getting it to run on changed files instead of requiring a build. Nov 28, 2017 at 19:36
  • 1
    I didn't have an issue with running "ng build" in Task Runner. But I did have an issue with debugging the project's Typescript code in VS. Therefore I migrated my code to use the DotNet Angular template instead. You can see the steps that I used here: stackoverflow.com/questions/46665314/… Nov 28, 2017 at 23:17
9

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

3
  • 1
    The new template is really nice. It works great, so long as you only need to host one SPA. Configuring for multiple SPAs (or in the case of Angular, a single SPA with multiple localized compilations) is supposedly possible, but there's no documentation yet. I'm working on figuring it out, but no luck so far...
    – asgallant
    Jan 18, 2018 at 19:46
  • @asgallant It's easier than you think. No need for multiple compiles. Keep the App component as lite as possible only with dependencies on your core module. Configure your app router to lazy load all features. I'm working on a repo that will demonstrate this. Hopefully I will have it finished soon. github.com/mikelunn/net-core-mvc-angular
    – Mike Lunn
    Mar 21, 2018 at 2:28
  • Following up, I did find a solution, posted here.
    – asgallant
    Mar 21, 2018 at 20:51
3

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. New ASP.NET Core Web Application
  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>
  1. Right-click on the name of your project and select Reload Project. Save your changes.
  2. 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();
}
  1. Open a CMD prompt in your project directory.

  2. Type npm install -g @angular/cli

  3. 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.

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

  5. 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.

1
  • This approach works. Thank you.
    – Illep
    Oct 16, 2021 at 21:50
1

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.

1

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
0

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

0

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.

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.