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

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.

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

53 thoughts to “How to create an Angular 6 app with Visual Studio 2017”

  1. Hi, thank you so much for sharing this guide!

    seems to do most of the job fine – just one thing,
    I noticed the website does not update during runtime after saving changes.
    For example, I change the value of the title property in the app.component.ts, save and nothing happens.

    Anyone?

  2. Do you have any post to deploy the .net core + angular 6 application to cloud/azure/aws. Please provide the reference

  3. Worked perfectly for me with angular 7. If you want “dotnet watch run” to rebuild on angular code updates, add this new ItemGroup to your .csproj file:

  4. Great walkthrough. Worked perfectly, thanks for sharing!

    Just a note, Visual Studio 2017 now includes the line true in .csproj by default, as well as already including app.UseStaticFiles(); in Startup.cs

    I did get an error when running “ng new Angular6App” due to Visual Studio already creating a .gitignore file. Once I deleted that, the ng new command executed successfully, and I was able to build and run the application on the first try.

    Windows 10
    Visual Studio 2017 v15.8.9
    Angular CLI 7.0.5
    Node.js v 10.6.0

    1. The line that’s already included in .csproj is TypeScriptCompileBlocked . Forgot to remove the tags so they wouldn’t be stripped.

  5. It is not working for me. I have a “initializers are not allowed in ambient contexts” mistake and “initializers may only be declared within a type” as well. Done a lot of step by step guides, but it won’t help

  6. Is this possible to upload a project with Angular 6 and asp.net MVC?
    Or a step to step guide? Thanks in advance

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

  8. It would be nice to include steps about installing node.js and npm. Even just a sentence would be nice.

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

  10. 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!

  11. 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…

  12. 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“

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

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

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

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

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

  18. Shouldn’t the tag in .csproj file be instead of , i.e. “Compile” vs “Compiler” ?

  19. 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…

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

        1. Were you able to fix this issue? I am running into the same issue, any help will be appreciated.

  21. 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();

        1. And what is required to make that nice solution working locally to work in Azure ? The “root” URL keeps redirecting to the homecontroller index page instead of the wwwroot index.html page.

Leave a Reply

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