Skip to main content

How to create an Angular 6 app with Visual Studio 2017

At the time of writing this post, default ASP.NET Core SPA templates allow you to create Angular 5 based app with Visual Studio without installing any third-party extensions or templates. Angular 6 is out now and you can also upgrade the Angular 5 app to Angular 6. What if you want to create Angular 6 app with VS 2017? This post talks about how to create an Angular 6 App with Visual Studio 2017 and how to extend it with a simple example.

How to create an Angular 6 app with Visual Studio 2017

In this post, we’ll use an ASP.NET Core 2.1 based API project and inside the same project, will create an angular 6 app. Therefore, before we begin, please do the following installation (ignore if already done).

Open Visual Studio 2017, hit Ctrl+Shift+N and select the ASP.NET Core Web Application (.NET Core) project type from the templates. When you click Ok, you will get the following prompt. Select ASP.NET Core 2.1 and choose the API template.

How to create an Angular 6 app with Visual Studio 2017

The Visual Studio will create an ASP.NET Core 2.1 based Web API project with a controller named ValuesController. Just run the app to make sure it is running successfully.

Now, let’s add Angular 6 app to this project through Angular CLI. To do that, first open developer command prompt for Visual Studio and navigate to the project folder (if not there). First, install/update the Angular CLI using the following command.

npm install -g @angular/cli

Next, we need to create angular 6 based app. To do that, navigate to the ASP.NET Core project root folder (where the project’s solution file is present) and run the following command. Here, the angular app name must be same as your project name.

ng new Angular6App

This will take some time to create angular 6 based app. Once created, the project structure will look like the following.

Angular 6 Application with VS 2017

To run this angular application with Visual Studio 2017, we need to make a couple of changes.

  • First, edit the .csproj file and add the following 2 entries in the PropertyGroup section.
    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked> 
    <PostBuildEvent>ng build --aot</PostBuildEvent>

    These entries will ensure that TypeScript files are compiled using Angular CLI instead of Visual Studio.

  • Next, open angular.json file and set the outputPath key value to wwwroot. This is required as the wwwroot folder in ASP.NET Core application, is the place to serve static files. This change tells angular cli to copy the generated HTML, CSS and JS files to wwwroot folder.
  • Next, open Startup.cs file and add these 2 middlewares in the configure method.
    app.UseDefaultFiles();
    app.UseStaticFiles();
    

    This tells ASP.NET Core to serve the static content from the wwwroot folder.

  • Next, delete "launchUrl": "api/values" from the Properties/launchSettings.json file.
  • Finally, build the application in Visual Studio and run the app. You should see following in the browser.

    Angular 6 app running in the browser

That’s it. The angular 6 based app running successfully in the browser.

If you want to learn all of Angular, I want to personally recommend ng-book as the single-best resource out there. You can get a copy here.

Conclusion

With Angular 5, the ASP.NET Core SPA templates support angular cli based application, compare to Angular 4 based application. This is the right decision as this allows developers to include Angular based apps created using CLI inside ASP.NET Core projects. In this post, we saw how easily we can integrate angular cli based application in ASP.NET Core app.

Thank you for reading. Keep visiting this blog and share this in your network. Please put your thoughts and feedback in the comments section.

PS: If you found this content valuable and want to return the favour, then Buy Me A Coffee

37 thoughts on “How to create an Angular 6 app with Visual Studio 2017

  1. I have a problem, when I build the project(from vs) My wwwroot folder is deleted, any idea how to fix it?

  2. May want to include going to node_modules folder in file explorer and set properties to hidden. In VS2017 you may notice a long delay refreshing solution explorer if you don’t take this step.

  3. Wow, this is a lot easier than using the Angular 5 template and trying to upgrade to Angular 6.

    It worked the first time.

    Thanks!

  4. It works but I haven’t been able to use the angular router instead of the server-side one. Everything works fine until you refresh the browser…

  5. and I have a problem, I’m having a mistake after bathing/gbuild (F6)
    MSB3073 the “ng build –aot” ending/exited with code 1
    this problem applies only to Visual Studio, because when I normally run the console in the directory (ng build –aot), everything works without any problems. How can I beat this?

    1. This is because when the angular cli tries to run `ng built -aot` command, the `wwwroot` folder is locked by visual studio and iis express. So to solve this, Instead of you can use in order to built angular files before the file get locked.

      “`ng build –aot“`

    2. Your comment is awaiting moderation.

      This is because when the angular cli tries to run `ng built -aot` command, the `wwwroot` folder is locked by visual studio and iis express. So to solve this, Instead of “`PostBuildEvent“` tag in .cproj file, you can use “`PreBuildEvent“` in order to built angular files before the file get locked.

      “`ng build –aot“

  6. Any way to make this work like a CLI project so you can run commands like: ng generate someComponent ? Or are there any tools you use to overcome this shortcoming? Everything else worked for me.. I have actually tried about 5 different people and it finally came down to the angular version.. And running the ng new at the solution file level with the name as the project name was also key. Thanks!

    1. Ah.. Figured it out.. It wasn’t working from within the Powershell in Visual Studio, but works from Powershell outside. Also opened the solution from VS Code so maybe that might have helped. Thanks so much and I enjoy that what you have actually works! Can’t describe the frustration trying to get this to work.

  7. That’s great! But I can’t debug typescript in VisualStudio any more.
    That was possible when you create your solution based on VS Angular project template for ASP.NET Core 2.0 and Angular 4.2.5.

    1. My understanding is, the 4.2.5 angular based templates were SPA templates released by Microsoft. This is a not a SPA template. I think we’ll have to wait for official SPA templates for Angular 6.

  8. Hello, is it normal that when I build the project works but the wwwroot symbol changes to a regular folder symbol?

  9. Awesome !!! Very nice steps explained and it works perfectly ! Its perfect setup for Visual Studio 2017 and Angular 6.
    Thank you so much for sharing this.

  10. I would like to know if you have any way I can edit the layout and press f5 to refresh the page and layout change, in my application I make the changes in html but the changes do not appear in the screen result

  11. Useless… The main advantage of using asp.net core angular template is SSR, without it, there is no worth using them together, it only brings more complexity. Have to wait till the release of official template…

  12. I have followed this article throughout and done everything above but my app is just not working. It shows error after build the app using VS, probably it is related to AOT Compiler but I’m not sure how to resolve it.

    Error: The command “ng build –aot” exited with code 9009. Angular6App2 C:\Program Files (x86)\Microsoft Visual Studio\2017\Enterprise\MSBuild\15.0\Bin\Microsoft.Common.CurrentVersion.targets 5143

    What I’m missing here? Any help would be appreciated !! :)

      1. Not able to tackle the issue in angular.json file. Already I have set the outputPath key value from “outputPath”: “dist/Angular6App2” to “outputPath”: “wwwroot”. No further change.

  13. This is not working. I have done every thing above but when I try to run the site, I get “This site cannot be reached” page. I can run the API just fine, but it will not give me the the Angular Page.

    1. I figured it out.
      I had to add the following two lines to Startup.cs

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

Leave a Reply

Your email address will not be published. Required fields are marked *