18

Fast track your Angular 2 and .NET Core web app development

22414712471_1cd84225e6_b

“If you’re an enterprise .NET developer who is used to a mature, integrated, rock-solid toolchain, HTML/CSS/JavaScript development will feel to you like a bag of cats. And the bag is on fire.”'badlife' (Reddit)

Modern front-end development is a mess of competing frameworks, task runners and build systems that may just have you running back to the safety of ASP.NET and Visual Studio before you’ve even begun.

The slow road

With Angular 1, you could take your existing ASP.NET web application, add a few script references and get on with adding some SPA goodness to your site.

Angular 2 changes all that, there is an entire ecosystem that you need to get up and running. You’ll be faced with setting up Grunt/Gulp or WebPack, NodeJS, Typescript and making it all work together before you can even think about writing “Hello World”.

Ignoring the obvious debate about the merits of this approach and whether all this complexity is really worth it (that’s a conversation for another day) you’re left wondering if there’s any way to test out Angular 2 and build something without learning every nuance of Node, WebPack or anything else deemed necessary by the Angular gods (AKA Google).

The highway

Before you run screaming back to the (relative) safety of Visual Studio. Here’s another option.

Update – 21st February 2017
If you’re using Visual Studio 2017, check out an alternative way of creating your project using the dotnet new command.

If you’re using Visual Studio 2015 then you can take a shortcut by using the ASP.NET Core template pack. The pack includes a template for creating an Angular 2 with .NET Core project which will have you at “Hello World” in a few clicks.

That’s not to say you won’t need to learn all about WebPack and Node Modules at some point in the future, but you don’t need to derail your learning by getting all that set up from day one.

Make sure you have the following prerequisites installed.

Visual Studio 2015 Update 3 – Update 3 is required.

.NET Core Tooling Preview 2 or later (.NET Core Runtime 1.0.x and 1.1.0 are supported).

TypeScript 2

Node.js version 4 or later

Then grab and install the templates.

Download the ASP.NET Core Template Pack.

For more detailed background information about the template pack (and a few gotchas you might run into), check out Steve Sanderson’s announcement post.

Hello World

Phew, that’s still a lot of prerequisites and dependencies but now you can sit back, relax, and let the template set up your shiny new web application for you.

Open up Visual Studio and create a new project.

You should find some new templates available under “Web”.

angular-2-starter-application

Choose ASP.NET Core Angular 2 Starter Application (.NET Core) and fill out the usual details (name, location etc).

Once Visual Studio’s finished, you’ll see something like this.

angular-2-starter-application-solution

Before we go into the details, hit CTRL-F5 to preview your app.

angular-2-hello-world

Made It

So you did it, you got to Hello World without having to manually set up WebPack with Angular 2 and Typescript. But what can you do now?

In the next post we’ll explore the solution and add our first component.

photo credit: tudedude Arduino Controller For Mini Mill Stepper Motor via photopin (license)

  • Diogo Mello

    It seems it is going to be a nice tutorial however, get some error with the installed template.

    First, after choosing the desired template (ASP.NET Core Angular 2 Starter Application), I got the following error:

    https://uploads.disquscdn.com/images/6b21514fa892d7f2814847fe6451070700bcd055a3976eba6dad728726fb5db3.png

    “The following error occurred attempting to run the project model server process (1.0.0-preview3-004056).

    Unable to start the process. No executable found matching command “dotnet-projectmodel-server”

    The project model server process provides intellisense, build, and reference information to Visual Studio and without it your experience will be very limited. Please try closing and reopening Visual Studio to see if that corrects the problem. Alternatively, check that the .NET Core SDK is properly installed.”

    After that, the solution/project was created but, when I´ve tried to run it I got other error:

    https://uploads.disquscdn.com/images/34163e2711c9d848a63b32bfb60c1512f6f8ab959f1d5a8232e2d9dde204a267.png

    “Unable to start debugging. The startup project cannot be launched. Ensure that the correct project is set as the startup project. The startup project can be changed by selecting the ‘Set as Startup Project’ command from the right click menu in Solution Explorer.

    Additionally make sure its debug settings are correctly configured in project properties.”

    Don´t know if it is just on my machine or if the template package needs to be updated.

    Thanks!

    • Hey Diogo, are you using .net Core 1.1 and/or Visual Studio 2017?

      The reference to “1.0.0-preview3-004056” makes me think you might be.

      I’ve yet to see an update from the team behind the templates regarding support for 1.1 and/or Visual Studio 2017 but I imagine they’re working on it.

      If you are definitely using 1.0.1 let me know and I’ll see if I can reproduce the issue myself.

      • Diogo Mello

        Hey Jon, thank you for the answer.

        Though I have VS 2017 RC and Core 1.1 installed in my machine, I used VS 2015. Don´t know if, just by having installed Core 1.1, it would be a problem.

        Thank you again. Regards.

        • No problem. I just checked and .NET Core 1.1 is now supported (I’ve updated the article accordingly).

          Support for VS 2017 (specifically csproj) is coming soon.

          Hope you get it working, let me know how you get on 🙂

          • Christopher Cooper

            Hello there, any news on when this will be available for VS 2017? Thanks

          • Last I checked, there wasn’t a version of the template pack which supported using CSProj/VS2017 with .NET Core but that was a few weeks ago, there may have been an update in the meantime.

            Best place to check is to keep an eye on either of the following.

            http://blog.stevensanderson.com/ (Steve Sanderson’s blog)
            https://marketplace.visualstudio.com/items?itemName=MadsKristensen.ASPNETCoreTemplatePack (official download page for the template pack).

            Or try reaching out to Steve Sanderson on twitter @stevensanderson

          • Christopher Cooper

            Thanks Jon! Also many thanks for this article, it had me up and running in no time 🙂

          • So it looks like you may be in business with VS 2017 now.

            As an alternative to installing the Template Pack as a Visual studio extension, you can also install it via npm and then create new projects using Yeoman.

            I just tried that using the following commands.


            npm install -g yo generator-aspnetcore-spa


            cd some-empty-directory
            yo aspnetcore-spa

            as per the instructions at https://github.com/aspnet/JavaScriptServices.

            When you do that, you get presented with some options and it now asks if you want to create a project with a project.json (compatible with VS2015) or csproj (compatible with VS2017) so it looks like support has been added.

            https://uploads.disquscdn.com/images/190a9115a5a9a89df5c04f441952f1b5745be0b7251f39bea8efc554f827e70d.png

            I assume this also applies if you install the template pack visual studio extension as covered in my article, but I haven’t had chance to try it myself yet.

          • Drew E

            Have you had a chance to run a .csproj based project that was generated with this template? I tried running it in VS 2017, and it just bombs out. The IIS Express process starts up, and a browser window is launched. A ‘please wait while we attach’ message shows up, and then IIS Express process shuts down and the browser window closes. I am curious if I have issues locally, or if other people are seeing the same.

            Thanks,
            Drew

          • Hi Drew.

            I haven’t tried .csproj using VS2017 yet. Might be worth getting in touch with the template authors to see if it’s a general issue.

            Steve Sanderson is on twitter at @stevensanderson

            Thanks
            Jon

  • svrooij

    Thanks for this great guide!! Devoted a post on it. https://svrooij.nl/2017/01/getting-started-with-angular2-and-net-core/

    • You’re welcome, thank you for the feedback (and links) 🙂

  • chaitra sangamesh

    Hi Jon, I have DotNetCore.1.0.1-VS2015Tools.Preview2.0.3 installed on my machine. When I try the above mentioned example in VS2015 I get some reference errors like “Microsoft.AspNetCore.AngularServices”: “1.0.0-*”,
    “Microsoft.AspNetCore.Mvc”: “1.0.1”,
    “Microsoft.Extensions.Configuration.CommandLine”: “1.0.0”,

    Does not exists, what should be done? Thank you.

    • huzefa qubbawala

      Upvote, Have you got any fix for that

  • sea noreturn

    Wonderful mini series. absolutely loved it. Some question below:
    1. How to make breakpoint work in ts code?
    2. How to enable dotnet watch function with IISExpress?
    3. How to enable editing in visual studio when debugging?

  • sea noreturn

    yo generator-aspnetcore-spa is much batter than the template pack. Everything works with VS2017 including debugging and hot swap. The only disappointment is that VS2017 is slow. Wish it would be improved with release version.

  • Akash

    Thanks for the great blog. However, I’m more interested in learning, How to migrate an existing angular 2 site in .NET Core? Could you please guide me through? Thanks!!

  • SVM

    I need one clarification . I am looking for a Hybrid approach for .net core MVC and Angular 2. will this work or my thought process is not right, please provide your suggestions and approaches. most of the references online is angular 2 with .net core only, where angular is the dominant?