ASP.NET Core 3 and Angular 9 - Third Edition

By : Valerio De Sanctis

ASP.NET Core 3 and Angular 9 - Third Edition

By: Valerio De Sanctis

Overview of this book

Learning full stack development calls for knowledge of both frontend and backend web development. By covering the impressive capabilities of ASP.NET Core 3.1 and Angular 9, right from project setup through to the deployment phase, this book will help you to develop your skills effectively. The book will get you started with using the .NET Core framework and Web API Controllers to implement API calls and server-side routing in the backend. Next, you will learn to build a data model with Entity Framework Core and configure it using either a local SQL Server instance or cloud-based data stores such as Microsoft Azure. The book will also help you handle user input with Angular reactive forms and frontend and backend validators for maximum effect. You will later explore the advanced debugging and unit testing features provided by xUnit.net (.NET Core) and Jasmine, as well as Karma for Angular. Finally, you will implement various authentication and authorization techniques with the ASP.NET Core Identity system and the new IdentityServer, as well as deploy your apps on Windows and Linux servers using IIS, Kestrel, and Nginx. By the end of this book, you will be equipped with the skills you need to create efficient web applications using ASP.NET Core and Angular.

Preface

Who this book is for

What this book covers

To get the most out of this book

Download the example code files

Download the color images

Conventions used

Get in touch

Reviews

Getting Ready

Technical requirements

Two players, one goal

The ASP.NET Core revolution

ASP.NET Core 1.x

ASP.NET Core 2.x

ASP.NET Core 3.x

What's new in Angular?

Reasons for choosing .NET Core and Angular

A full-stack approach

MPAs, SPAs, PWAs, and NWAs

Multi-Page application

Single-page application

Progressive web application

Native web application

Product owner expectations

A sample SPA project

Not your usual Hello World!

Preparing the workspace

Disclaimer – do (not) try this at home

The broken code myth

Stay hungry, stay foolish, yet be responsible as well

Setting up the project

Installing the .NET Core SDK

Checking the SDK version

Creating the .NET Core and Angular project

Opening the new project in Visual Studio

Performing a test run

Summary

Suggested topics

References

Free Chapter

Looking Around

Technical requirements

Solution overview

The .NET Core back-end

Web host versus web server

Startup.cs

appsettings.json

The Angular front-end

Workspace

angular.json

package.json

Upgrading (or downgrading) Angular

Upgrading (or downgrading) the other packages

tsconfig.json

Other workspace-level files

The /ClientApp/src/ folder

The /app/ folder

AppModule

Server-side AppModule for SSR

A blast from the past

Back to the future

Testing it out

The strongly-typed approach(es)

Client app cleanup

Trimming down the Component list

The AppModule source code

Updating the NavMenu

Summary

Suggested topics

References

Front-end and Back-end Interactions

Technical requirements

Introducing .NET Core health checks

Adding the HealthChecks middleware

Adding an Internet Control Message Protocol (ICMP) check

Possible outcomes

Creating an ICMPHealthCheck class

Adding the ICMPHealthCheck to the pipeline

Improving the ICMPHealthCheck class

Adding parameters and response messages

Updating the middleware setup

Implementing a custom output message

About health check responses and HTTP status codes

Configuring the output message

Health checks in Angular

Creating the Angular Component

health-check.component.ts

Imports and modules

ngOnInit (and other lifecycle hooks)

health-check.component.html

health-check.component.css

Adding the Component to the Angular app

Summary

Data Model with Entity Framework Core

Technical requirements

The WorldCities web app

Reasons to use a Data Server

The data source

The data model

Introducing Entity Framework Core

Installing Entity Framework Core

The SQL Server Data Provider

DBMS licensing models

What about Linux?

SQL Server alternatives

Data modeling approaches

Model-First

Pros

Cons

Database-First

Pros

Cons

Code-First

Pros

Cons

Making a choice

Creating the entities

Defining the entities

The City entity

Country

Defining relationships

Adding the Country property to the City entity class

Adding the Cities property to the Country entity class

Entity Framework Core loading pattern

Getting a SQL Server

Installing SQL Server 2019

Creating a SQL Database on Azure

Setting up a SQL Database

Configuring the instance

Configuring the database

Creating the WorldCities database

Adding the WorldCities login

Mapping the login to the database

Creating the database using Code-First

Setting up the DbContext

Database initialization strategies

Updating the appsettings.json file

Creating the database

Updating Startup.cs

Adding the initial migration

Updating the database

The "No executable found matching command dotnet-ef" error

Understanding migrations

Is data migration required?

Populating the database

Implementing SeedController

Importing the Excel file

Summary

Fetching and Displaying Data

Technical requirements

Fetching data

Requests and responses

JSON conventions and defaults

A (very) long list

city.ts

cities.component.ts

cities.component.html

The [hidden] attribute

cities.component.css

app.module.ts

nav-component.html

Serving data with Angular Material

Installing System.Linq.Dynamic.Core

What is LINQ?

Linq.Dynamic.Core pros and cons

Preventing SQL injections

Updating CitiesController

Updating the Angular app

angular-material.module.ts

cities.component.ts

cities.component.html

Adding filtering

Extending ApiResult (again)

CitiesController

CitiesComponent

CitiesComponent template (HTML) file

CitiesComponent style (CSS) file

AngularMaterialModule

Adding the countries to the loop

.NET Core

CountriesController

An odd JSON naming issue

Angular

country.ts

countries.component.ts

countries.component.html

countries.component.css

AppModule

NavComponent

Testing CountriesComponent

Summary

Suggested topics

.NET Core

Angular

References

Forms and Data Validation

Technical requirements

Exploring Angular forms

Forms in Angular

Reasons to use forms

Template-Driven Forms

The pros

The cons

Model-Driven/Reactive Forms

Building our first Reactive Form

ReactiveFormsModule

CityEditComponent

city-edit.component.ts

city-edit.component.html

city-edit.component.css

Adding the navigation link

app.module.ts

cities.component.html

Adding a new city

Extending the CityEditComponent

Adding the "Add a new City" button

Adding a new route

HTML select

Angular material select (MatSelectModule)

Understanding data validation

Template-driven validation

Safe Navigation Operator

Model-Driven validation

Our first validators

Server-side validation

DupeCityValidator

city-edit.component.ts

CitiesController

city-edit.component.html

Testing it out

Observables and RxJS operators

Performance issues

Introducing the FormBuilder

Creating the CountryEditComponent

country-edit.component.ts

isDupeField validator

IsDupeField server-side API

An alternative approach using Linq.Dynamic

country-edit.component.html

country-edit.component.css

AppModule

countries.component.html

Testing the CountryEditComponent

Summary

Suggested topics

References

Code Tweaks and Data Services

Technical requirements

Optimizations and tweaks

Template improvements

Form validation shortcuts

Class inheritance

Implementing a BaseFormComponent

Extending CityEditComponent

Extending CountryEditComponent

Bug fixes and improvements

Validating lat and lon

city-edit.component.ts

city-edit.component.html

Adding the number of cities

CountriesController

Creating the CountryDTO class

Angular front-end updates

DTO classes – should we really use them?

Separation of concerns

Security considerations

DTO classes versus anonymous types

Securing Entities

[NotMapped] and [JsonIgnore] attributes

Adding the country name

CitiesController

Angular front-end updates

Data Services

XMLHttpRequest versus Fetch (vs HttpClient)

XMLHttpRequest

Fetch

HttpClient

Building a Data Service

Creating the BaseService

TypeScript access modifiers

Adding the common interface methods

Type variables and generic types – and

Why return Observables and not JSON?

Creating the CityService

Implementing the CityService

AppModule

CitiesComponent

CityEditComponent

Implementing loadCountries() and IsDupeCity() in CityService

Creating the CountryService

Summary

Back-end and Front-end Debugging

Technical requirements

Back-end debugging

Windows or Linux?

The basics

Conditional breakpoints

Conditions

Actions

Testing the conditional breakpoint

The Output window

Configuring the Output window

Debugging EF Core

The GetCountries() SQL query

Getting the SQL code programmatically

Implementing the ToSql() method

Using the #if preprocessor

Front-end debugging

Visual Studio JavaScript debugging

JavaScript source maps

Browser developer tools

Angular form debugging

A look at the Form Model

The pipe operator

Reacting to changes

The Activity Log

Testing the Activity Log

Extending the Activity Log

Client-side debugging

Summary

Suggested topics

References

ASP.NET Core and Angular Unit Testing

Technical requirements

.NET Core unit tests

Creating the WorldCities.Test project

Moq

Microsoft.EntityFramework.InMemory

Adding the WorldCities dependency reference

Our first test

Arrange

Act

Assert

Executing the test

Using the CLI

Using the Visual Studio Test Explorer

Debugging tests

Test-Driven Development

Behavior-Driven Development

Angular unit tests

General concepts

Introducing the TestBed interface

Testing with Jasmine

Our first Angular test suite

The import section

The describe and beforeEach sections

Adding a mock CityService

Fake service class

Extending and overriding

Interface instance

Spy

Implementing the mock CityService

Alternative implementation using the interface approach

Configuring the fixture and the Component

Creating the title test

Creating the cities tests

Running the test suite

Summary

Suggested topics

References

Authentication and Authorization

Technical requirements

To auth, or not to auth

Authentication

Third-party authentication

The rise and fall of OpenID

OpenID Connect

Authorization

Third-party authorization

Proprietary versus third-party

Proprietary auth with .NET Core

The ASP.NET Core Identity Model

Entity types

Setting up ASP.NET Core Identity

Adding the NuGet packages

Creating ApplicationUser

Extending ApplicationDbContext

Adjusting our unit tests

Configuring the ASP.NET Core Identity middleware

Configuring IdentityServer

Updating the appSettings.Development.json file

Revising SeedController

Adding RoleManager and UserManager through DI

Defining the CreateDefaultUser() unit test

Implementing the CreateDefaultUsers() method

Rerunning the unit test

A word on async tasks, awaits, and deadlocks

Updating the database

Adding identity migration

Applying the migration

Updating the existing data model

Dropping and recreating the data model from scratch

Seeding the data

Authentication methods

Tokens

Implementing authentication in Angular

Creating the AuthSample project

Troubleshooting the AuthSample project

Exploring the Angular authorization APIs

Route Guards

Available Guards

HttpInterceptors

The authorization Components

LoginMenuComponent

LoginComponent

LogoutComponent

Testing registration and login

Implementing the Auth API in the WorldCities app

Importing the front-end Authorization APIs

AppModule

NavMenuComponent

Adjusting the back-end code

Installing the ASP.NET Core Identity UI package

Customizing the default Identity UI

Mapping Razor Pages to EndpointMiddleware

Securing the back-end action methods

Testing login and registration

Summary

Suggested topics

References

Progressive Web Apps

Technical requirements

PWA – distinctive features

Secure origin

Offline loading and Web App Manifest

Service workers versus HttpInterceptors

Introducing @angular/service-worker

The .NET Core PWA middleware alternative

Implementing the PWA requirements

Manual installation

Adding the @angular/service-worker npm package

Updating the angular.json file

Importing ServiceWorkerModule

Updating the index.html file

Adding the Web App Manifest file

Updating the Startup.cs file

Publishing the Web App Manifest file

Adding the favicon

Adding the ngsw-config.json file

Automatic installation

The Angular PNG icon set

Handling the offline status

Option 1 – the window's isonline/isoffline event

Option 2 – the Navigator.onLine property

Downsides of the JavaScript approaches

Option 3 – the ng-connection-service npm package

Installing ng-connection-service

Updating the app.component.ts file

Removing the isOnline.txt static file from the cache

Installing the ng-connection-service via NPM (alternate route)

Updating the app.component.html file

Cross-Request Resource Sharing

Testing the PWA capabilities

Using Visual Studio and IIS Express

Creating a Publish Profile

Copying the CLI-generated files

Testing out our PWAs

Installing the PWA

Alternative testing ways

Serving our PWA using http-server

Summary

Suggested topics

References

Windows and Linux Deployment

Technical requirements

Getting ready for production

.NET Core deployment tips

The launchSettings.json file

Development, staging, and production environments

Rule(s) of thumb

Setting the environment in production

ASP.NET Core deployment modes

Framework-dependent deployment pros and cons

Self-contained deployment pros and cons

Framework-dependent executable pros and cons

Angular deployment tips

ng serve, ng build, and the package.json file

Differential loading

The angular.json configuration file

Automatic deployment

CORS policy

Windows deployment

Creating a Windows Server VM on MS Azure

Accessing the MS Azure portal

Adding and configuring a new VM

Setting the inbound security rules

Configuring the VM

Adding the IIS web server

Installing the ASP.NET Core Windows hosting bundle

Restarting IIS following ASP.NET Core runtime installation

Publishing and deploying the HealthCities app

Folder publish profile

FTP publish profile

Azure Virtual Machine publish profile

Configuring IIS

Adding an SSL certificate

Adding a new IIS website entry

Configuring the IIS application pool

Testing the HealthCheck web application

Updating the testing machine's HOST files

Testing the app with Google Chrome

Linux deployment

Creating a Linux CentOS VM on MS Azure

Add and configure the CentOS 7.7 VM

Setting the inbound security rules

Configuring the Linux VM

Connecting to the VM

Installing the ASP.NET runtime

Installing Nginx

Starting up Nginx

Checking the HTTP connection

Opening the 443 TCP port

firewalld

ufw

Adapting the WorldCities app

Adding the forwarded headers middleware

Checking the database connection string

Publishing and deploying the WorldCities app

Creating the /var/www folder

Adding permissions

Copying the WorldCities publish folder

Configuring Kestrel and Nginx

Creating the self-signed SSL certificate

Configuring the Kestrel service

Why are we not serving the web app with Kestrel directly?

Configuring the Nginx reverse proxy

Updating the nginx.conf file

Testing the WorldCities application

Update the testing machine's HOST files

Testing the app with Google Chrome

Troubleshooting

Summary

Suggested topics

References

Other Books You May Enjoy

Leave a review - let other readers know what you think

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Manual installation

In this section, we'll see how to manually implement the required technical steps we're still missing to make our HealthCheck app fully compliant with the PWA requirements.

Let's briefly recap them:

Add the @angular/service-worker npm package (package.json)
Enable the service worker support in the Angular CLI configuration file (angular.json)
Import and register ServiceWorkerModule in the AppModule class (app.module.ts)
Update the main app's HTML template file (index.html)
Add a suitable icon file (icon.ico)
Add the manifest file (manifest.webmanifest)
Add the service worker configuration file (ngsw-config.json)

For each step, we've mentioned the relevant file that we'll have to update between parentheses.

ASP.NET Core 3 and Angular 9 - Third Edition

By : Valerio De Sanctis

ASP.NET Core 3 and Angular 9 - Third Edition

By: Valerio De Sanctis

Overview of this book

Related Content you might be interested in

Current Title:

ASP.NET Core 3 and Angular 9 - Third Edition

ASP.NET Core 2 and Angular 5

Learning Angular

Learning Angular, Fourth Edition

Manual installation