Using a template to create an app with .NET Core 1.1 as backend with Angular4 as frontend

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 nodejs and 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 dotnet new.

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      

Now mkdir your new solution directory (e.g. angular-template), then cd to that directory. Now run

dotnet new angular --Framework netcoreapp1.1

Check out 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:

Screen Shot 2017-07-28 at 5.21.10 PM.png

Let’s run this app! But we gotta restore both the .NET dependencies and npm dependencies first.

dotnet restore
npm install

Then dotnet run and go to http://localhost:5000/

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.

…But I have a sneaking suspicion it’s because my website needs to be on a web server and not on localhost for the JavaScript hamburger menu to work.

I’ll set up a web server on my machine next time to confirm that. Next time.

Source: Building Single Page Applications on ASP.NET Core with JavaScriptServices

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s