How to: Build Single Page Applications with ASP.NET Core and Angular 2.

Compiled from:


1) Make sure you have node installed, version > 6.

$ node --version


2) Install the SpaTemplates:

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

This will install templates such as:

Templates Short Name Language Tags ------------------------------------------------------------------------------------------ Console Application console [C#], F# Common/Console [...] 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 [...] ASP.NET Core Web API webapi [C#] Web/WebAPI Solution File sln Solution 

We are interested into the angular template.


3) Create your angular project.

$ dotnet new angular -o my-project

$ cd my-project


4) Install (restore) dependencies.

$ dotnet restore

$ npm install


5) Enable development mode (by setting an environment variable).

export ASPNETCORE_ENVIRONMENT=Development

Excerpt from the pages of the newly created web app:

Webpack dev middleware: In development mode, there’s no need to run the webpack build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.

Hot module replacement: In development mode, you don’t even need to reload the page after making most changes. Within seconds of saving changes to files, your Angular 2 app will be rebuilt and a new instance injected is into the page.


6) Run.

dotnet run

The application is available at http://localhost:5000.

submitted by /u/turdus-merula
[link] [comments]

Leave a Reply