.NET Core Angular VS2017 Templates

Home / .NET Core Angular VS2017 Templates

.NET Core Angular VS2017 Templates

posted on April 17, 2017 by in angular, ASP.NET, Core

The latest tooling in Visual Studio 2017 for .NET Core is pretty good. However, it seemed like built-in templates are a bit lacking. Fortunately, the dotnet sdk, and subsequently the CLI, have libraries available for various Single Page Application framework quick starts.

UPDATE – Also check out my other posts on this topic:

https://long2know.com/2017/04/net-core-angular-vs2017-templates-part-2/
https://long2know.com/2017/04/net-core-angular-vs2017-templates-part-3/


With the latest version of VS2017 installed, you should have the dotnet core SDK version 1.0.3 installed. If not, you can download the SDK from here.

The “dotnet –info” command can be used to confirm SDK version.

To get started with “dotnet new” (new being the command to create new projects), the SPA templates for Angular and other various frameworks can be utilized after installing this package:

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

This will run for a bit and install various dependencies. After installation is complete, the available templates can be viewed by running “dotnet new” by itself.

The template I’m interested in is the Angular one, of course. By using this template, you get a nice base starting point for an Angular application. Some of the niceties are having the build process already configured for bundling, minification, and various dependencies already configured.

Webpack, TypeScript, and other things appear already configured when the project is opened in VS2017.

Running the project for the first time can take a bit of time since all of the npm packages and such are pulled down. But, the template does have a few little niceties and is a fully working Angular project. The “Hello, world!” view has some nice information about the template and details some parts of the technology used in the template.

This is a pretty handy template. It supports SEO optimization and Server-side Rendering (SSR). The build process is completely handled by NPM, Webpack and .NET.

One caveat I ran into immediately was in the upgrade process. The template uses Angular 2.x. You can drop to a console and update to Angular 4.x like this:

git clone https://github.com/MarkPieszak/aspnetcore-angular2-universal
cd aspnetcore-angular2-universal
npm i -g npm-check-updates
npm-check-updates -a --packageFile package.json
npm install
npm run build:dev

However, that breaks the application/template entirely. That’s a bit concerning to me. I’d rather drop back to using my previous Angular 2.x template and update it to use VS2017 rather than dealing with a build process that is somewhat fragile.

The “aspnetcore-angular2-universal” template has been updated, more or less, to utilize Angular 4+ here:

https://github.com/MarkPieszak/aspnetcore-angular2-universal#faq

It is possible to clone it, update the npm packages, run webpack, and have it working. I’m still playing around with it, but may have some code snippets to share soon. At some point, I’d like to have my plunker demos moved over to a standard template that can easily be deployed to Azure or another cloud hosting service.

17 thoughts on “.NET Core Angular VS2017 Templates”

  1. Pingback: .NET Core Angular VS2017 Templates – Longing to know - Angular News

  2. This is a really cool thing, thanks for sharing! One thing I’ve noticed though, is that with the ASP.NET Core with Angular template – the “Bootstrapped” dropdown button for the navigation bar isn’t working. That’s weird, right? Maybe it’s just me.. 🙂

      1. I had a quick evaluation of the SPA templates, shortly after VS2017 came out (I think I had to ‘nuget’ the templates separately) and the ‘burger’ button in the UI just didn’t work at all.
        After updating VS2017 to the latest version (including dotnetcore 2) I created a new project and the ‘burger’ button now partially works.
        Clicking on it causes the menu to appear, and clicking on an item navigates to the appropriate page – however, the menu doesn’t disappear, and the ‘burger’ has to be clicked again to dismiss the menu.
        This can’t be right, surely?

          1. I like that “burger” menu better too. I’ve implemented something very similar in my apps.

  3. I’ve been following the steps in sequence and everything seems to be working – all downloads starting the VS 2017. I can open the project and see all of the files. But, Start (F5) is grayed-out. What didn’t I do?
    Thanks.

    1. That is very odd. One thing to try is ensuring the web site is set as the start-up project. If that doesn’t do anything, try removing the project from the solution, readding it, and then setting it as the start-up project.

  4. Tried another project and this time it worked. Don’t know what happened the first time.
    Have you used this template to build a solution that uses SQL Server via ASP.net – not using Entity Framework. All of the examples I’ve come across do not use SQLClient (ADO.net).
    Thanks.

    1. Glad it worked the 2nd time! Most of my projects do use Entity Framework Core, but I do also use a few of the EF hooks to access the DB connection and utilize ADO.NET directly via SQL Client.

  6. This is a cool article. Thank you.
    But can someone please tell me, Why does no one seem to care that all the MVC & Angular 2/4 templates seem to render the HTML like a dogs breakfast?

    For example this one will product 2X 2x Body

    I just cant move passed that.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.