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:
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:
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”
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.. 🙂
That is weird. I just used “dotnet new angular” to create a new/clean project and the navigation appeared to be working OK.
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?
The ‘burger’ menu on the Angular site, itself, seems a much nicer model…
Looks like I’ve got a lot of learning to do – the newer way of doing Angular apps is very compelling.
I like that “burger” menu better too. I’ve implemented something very similar in my apps.
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?
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.
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).
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.
Very nice article. If someone is looking for backend ASP.NET template. Here is a very nice web site for generating MVC templates online.
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.
I blame TypeScript .. 🙂
Is SSR in this template done by universal which included in the project?
SSR is included.
SSR included by universal or some kind of other mechanism?
See the FAQ link above. It details how SEO/SSR is achieved within the template.