Angular SPA Web API

Angular v5 Single Page Application with an ASP.NET Core Web API that uses token authentication. The OAuth 2.0 Resource Owner Password Credentials grant (ROPC) is implemented using IdentityServer4 and ASP.NET Core Identity as membership system with a SQLite database.

Get the Changelog.

Live example and its explanation.

ROPC grant requires the use of SSL.

For more complex scenarios, where web services are required by more than one application or third-party applications, you should use an OpenID Connect implicit flow.

Features

• Angular v5 & ASP.NET Core 2
• Angular CLI
• AoT compilation in development & production mode
• Angular CLI, .NET Core CLI or Visual Studio 2017
• Angular Material
• Dotnet watch
• Debugging
• Path Location Strategy
• Hot Module Replacement
• IdentityServer4 & ASP.NET Core Identity
• Resource Owner Password Credentials grant
• Refresh token
• Role based Authorization
• Development, Staging & Production environments

Project structure

The structure of the project is based on Angular CLI ASP.NET Core.

AngularSPAWebAPI

• Controllers
  • IdentityController.cs Identity APIs
  • ValuesController.cs Resources APIs
• Data Entity Framework migrations
  • DbInitializer.cs Provides method to populate the db
• Extensions
  • ShellExtensions.cs Extension to run npm commands in dev environment
• Models
  • ApplicationUser.cs Profile data for application users
• Properties
  • lanchSettings.json ASP.NET Core environments
• src Angular application
• wwwroot Root for Angular application deployment
• .angular-cli.json Angular CLI configuration
• Config.cs IdentityServer4 configuration
• IdentityDB.sqlite SQLite database
• package.json Packages for Angular app
• proxy.config.js Proxy configuration for ng serve command: Proxy To Backend
• Startup.cs Web API configuration

Installing

• Requirements
  • At least .NET Core 2.0
  • Node.js and npm
  • At least Angular CLI 1.6.0
• Edit ConnectionStrings in appsettings.json

Command line & .NET Core CLI

• npm install
• Restore & build the solution:

   dotnet restore
   dotnet build

Visual Studio 2017

• Make sure your configuration for external tools is correct: Tools > Options > Projects and Solutions > Web Package Management > External Web Tools

   .\node_modules\.bin
   $(PATH)
   ...
  

• Wait for packages restoring and build the solution
• To run npm commands in Visual Studio you can use NPM Task Runner extension

Running

Command line & .NET Core CLI

Development

• Set Development as environment variable: Working with multiple environments
• dotnet watch run

Make the changes to the Angular app: the browser will update without refreshing.

Staging

• npm run build:staging
• Set Staging as environment variable
• dotnet run --no-launch-profile

Production

• npm run build:prod
• Publish

Visual Studio 2017

Development

• Select AngularSPAWebAPI_Dev profile
• Start debugging
• Wait for building

Make the changes to the Angular app: the browser will update without refreshing.

Staging

• npm run build:staging
• Select AngularSPAWebAPI_Staging profile
• Start debugging

Production

• npm run build:prod
• Publish

Changing db

To use another database, for example SQLServer:

• Edit in Startup.cs:

services.AddDbContext<ApplicationDbContext>(options =>
    options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));

• Edit ConnectionStrings in appsettings.json:

"ConnectionStrings": {
  "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=IdentityDB;Trusted_Connection=True;MultipleActiveResultSets=true"
}

License

MIT