After a few tutorials that didn’t work for me and an angular template generator that failed on my Mac OS El Capitan…
I found a Microsoft-made generator that creates SPA templates. The generator doesn’t just offer Angular4, it also offers Aurelia, KnockoutJS, ReactJS, and ReactJS & Redux.
This post is about using a template to create an app that uses .NET Core 1.1 as the backend and Angular4 as the frontend tho. So the Angular4 template will be used.
So the pre-requisties is, of course, .NET Core SDK 1.1+.
And nodeJS 6+ too. As npm (node package manager) is shipped with it and npm manages web framework dependencies.
After you’re sure that you have
npm installed, open the Terminal and run
dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
The first time I ran this, I got a bunch of samey errors like
Too many open files when it was downloading packages.
Weird. So I just made sure that the
dotnet new command did work — it did — and tried to run the ‘install the SpaTemplates’ command again. Second try was a success. Weirder. Anyway, the output will include the list of templates you can run with
Templates Short Name Language Tags ------------------------------------------------------------------------------------------ Console Application console [C#], F# Common/Console Class library classlib [C#], F# Common/Library Unit Test Project mstest [C#], F# Test/MSTest xUnit Test Project xunit [C#], F# Test/xUnit ASP.NET Core Empty web [C#] Web/Empty ASP.NET Core Web App mvc [C#], F# Web/MVC MVC ASP.NET Core with Angular angular [C#] Web/MVC/SPA MVC ASP.NET Core with Aurelia aurelia [C#] Web/MVC/SPA MVC ASP.NET Core with Knockout.js knockout [C#] Web/MVC/SPA MVC ASP.NET Core with React.js react [C#] Web/MVC/SPA MVC ASP.NET Core with React.js and Redux reactredux [C#] Web/MVC/SPA MVC ASP.NET Core with Vue.js vue [C#] Web/MVC/SPA ASP.NET Core Web API webapi [C#] Web/WebAPI Solution File sln Solution
mkdir your new solution directory (e.g. angular-template), then
cd to that directory. Now run
dotnet new angular --Framework netcoreapp1.1
angular-template (or whatever name you picked for your solution directory) and you’ll see it now contains several directories and files. You’ll see that it also generated the
csproj file using the solution directory name. Here’s what mine looked like:
Let’s run this app! But we gotta restore both the .NET dependencies and npm dependencies first.
dotnet restore npm install
dotnet run and go to
If your browser window is at least 768px in width, the website will feature:
- a ‘hello world’ main page
- a sleek looking side-menu
- a simple incremental counter that can be accessed on the side-menu
- a simple fetch data example that can be also accessed on the side-menu
When the window width is lesser than 768px, the hamburger menu appears. And for some reason, the hamburger menu doesn’t respond at all upon clicking it so I can’t access the counter or fetch data example.
I’ll set up a web server on my machine next time to confirm that. Next time.
Update: Before I had thought the version of Angular was version 2. I checked my auto-generated
package.json file and it’s actually version 4.