packtpublishing / asp.net-core-3-and-angular-9-third-edition

Sample code for the ASP.NET Core 3 and Angular 9 programming book

ASP.NET Core 3 and Angular 9 - Third Edition

This is the code repository for ASP.NET Core 3 and Angular 9, published by Packt. It contains all the supporting project files necessary to work through the book from start to finish.

IMPORTANT NOTE

If you experience any issue while running the project while following the book's chapters, please do the following:

• Get the updated project from GitHub and save it in a separate folder
• Right-click to the project you want to run (for example Chapter_01/HealthCheck) and Set as StartUp Project
• Execute the /ClientApp/update-npm.bat file
• Launch the project in debug mode In case it works, compare your code with the GitHub files to see what's wrong. Also be sure to check out the book's errata and other useful info regarding the source code from the Issues page.

About the Book

This book is a sequel of the best-selling book ASP.NET Core 2 and Angular 5.

Key Features

• Design, build and deploy a Single Page Application or Progressive Web App with ASP.NET Core and Angular.
• Adopt a full-stack approach to effectively handle data management, Web APIs, application design, testing, SEO, security and deploy.
• Turn a Single-Page Application (SPA) into a Progressive Web App (PWA)
• Publish the finalized app on Windows and Linux servers.

Book Description

The ASP.NET Core and Angular book has established itself as a popular choice for learning full-stack development. This book will help you become fluent in both frontend and backend web development by combining the impressive capabilities of ASP.NET Core 3.1 and Angular 9 from project setup right through the deployment phase.

The book will help you use the .NET Core framework and Web API Controllers to implement the backend with API calls and server-side routing. Going further, you will learn to build the Data Model with Entity Framework Core and configure it using either a local SQL Server instance or cloud-based data stores such as MS Azure. The book will help you handle user input with Angular Reactive Forms and frontend and backend Validators for maximum effect. You will explore the advanced debugging and unit testing features provided by xUnit.NET (.NET Core) and Jasmine/Karma (Angular).

Eventually, 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.

What you will learn

• Implement a Web API interface with ASP.NET Core and consume it with Angular using RxJS Observables
• Create a Data Model using Entity Framework Core with Code-First and Migrations
• Setup and configure a SQL DB server using a local instance or a cloud data store on Azure
• Perform C# and JavaScript debugging using Visual Studio 2019
• TDD and BDD unit testing using xUnit, Jasmine and Karma
• Execute authentication and authorization using ASP.NET Identity, IdentityServer4, and Angular API
• Build Progressive Web Apps and explore Service Workers

Who This Book Is For

This book is aimed at seasoned ASP.NET developers who already know about ASP.NET Core and Angular in general, but want to know more about them and/or understand how to blend them together to craft a production-ready Single-Page Application (SPA) or Progressive Web Application (PWA).

However, the fully-documented code samples and the step-by-step implementation tutorials make the book easy to understand even for beginners and novice developers.

Instructions and Navigation

All of the code is organized into folders. Each folder starts with a number followed by the application name. For example, Chapter_02.

The code will look like the following:

import { Component } from "@angular/core";

@Component({
    selector: "pagenotfound",
    templateUrl: "./pagenotfound.component.html"
})

export class PageNotFoundComponent {
    title = "Page not Found";
}

Errata

• Page 230: This Address bar value- https://localhost:44344/api/Cities/?pageIndex=0pageSize=10

  should be replaced with

  https://localhost:44344/api/Cities/?pageIndex=0&pageSize=10

About the Author

Valerio De Sanctis is a skilled IT professional with more than 15 years of experience in lead programming, web-based development, and project management using ASP.NET, PHP and Java. He held senior positions at a range of financial and insurance companies, most recently serving as Chief Technology Officer, Chief Security Officer and Chief Operating Officer at a leading after-sales and IT service provider for top-tier life and non-life insurance groups.

During the course of his career Valerio De Sanctis helped many private organizations to implement and maintain .NET based solutions, working side by side with many IT industry experts and leading several frontend, backend and UX development teams. He designed the architecture and actively oversaw the development of a wide number of corporate-level web application projects for high-profile clients, customers and partners including London Stock Exchange Group, Zurich Insurance Group, Allianz, Generali, Harmonie Mutuelle, Honda Motor, FCA Group, Luxottica, ANSA, Saipem, ENI, Enel, Terna, Banzai Media, Virgilio.it, Repubblica.it, and Corriere.it.

He is an active member of the Stack Exchange Network, providing advice and tips for .NET, JavaScript, HTML5 and Web related topics on the StackOverflow, ServerFault, and SuperUser communities. Most of his projects and code samples are available under open-source licenses on GitHub, BitBucket, NPM, CocoaPods, JQuery Plugin Registry, and WordPress Plugin Repository. He's also a Microsoft Most Valuable Professional (MVP) for Developer Technologies, an annual award that recognizes exceptional technology community leaders worldwide who actively share their high quality, real world expertise with users and Microsoft.

Since 2014 he runs an IT-oriented, web-focused blog at www.ryadel.com featuring news, reviews, code samples and guides to help developers and tech enthusiasts from all around the world: he wrote various books on web development, many of which have become best sellers on Amazon with tens of thousands of copies sold worldwide.

You can reach him on GitHub, StackOverflow and LinkedIn.

Related Products

• ASP.NET Core and Angular 2 (first edition)
• ASP.NET Core 2 and Angular 5 (second edition)

asp.net-core-3-and-angular-9-third-edition's Issues

Sql Timeout

Hello,

I'm coding along with your book and I have a major problem whenever I launch the app. Fetching the data is either extremely slow or I get timed out. Here is the exception:

Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware[1] An unhandled exception has occurred while executing the request. Microsoft.Data.SqlClient.SqlException (0x80131904): Execution Timeout Expired. The timeout period elapsed prior to completion of the operation or the server is not responding. ---> System.ComponentModel.Win32Exception (258): Dépassement du délai d'attente. at Microsoft.Data.SqlClient.SqlCommand.<>c.<ExecuteDbDataReaderAsync>b__164_0(Task1 result)
at System.Threading.Tasks.ContinuationResultTaskFromResultTask2.InnerInvoke() at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state) --- End of stack trace from previous location where exception was thrown --- at System.Threading.Tasks.Task.ExecuteWithThreadLocal(Task& currentTaskSlot, Thread threadPoolThread) --- End of stack trace from previous location where exception was thrown --- at Microsoft.EntityFrameworkCore.Storage.RelationalCommand.ExecuteReaderAsync(RelationalCommandParameterObject parameterObject, CancellationToken cancellationToken) at Microsoft.EntityFrameworkCore.Storage.RelationalCommand.ExecuteReaderAsync(RelationalCommandParameterObject parameterObject, CancellationToken cancellationToken) at Microsoft.EntityFrameworkCore.Storage.RelationalCommand.ExecuteReaderAsync(RelationalCommandParameterObject parameterObject, CancellationToken cancellationToken) at Microsoft.EntityFrameworkCore.Query.Internal.QueryingEnumerable1.AsyncEnumerator.InitializeReaderAsync(DbContext _, Boolean result, CancellationToken cancellationToken)
at Microsoft.EntityFrameworkCore.SqlServer.Storage.Internal.SqlServerExecutionStrategy.ExecuteAsync[TState,TResult](TState state, Func4 operation, Func4 verifySucceeded, CancellationToken cancellationToken)
at Microsoft.EntityFrameworkCore.Query.Internal.QueryingEnumerable1.AsyncEnumerator.MoveNextAsync() at Microsoft.EntityFrameworkCore.EntityFrameworkQueryableExtensions.ToListAsync[TSource](IQueryable1 source, CancellationToken cancellationToken)
at Microsoft.EntityFrameworkCore.EntityFrameworkQueryableExtensions.ToListAsync[TSource](IQueryable1 source, CancellationToken cancellationToken) at WorldCities.Data.ApiResult1.CreateAsync(IQueryable1 source, Int32 pageIndex, Int32 pageSize, String sortColumn, String sortOrder, String filterColumn, String filterQuery) in E:\Software development\Portfolio\Projects\WorldCities\Data\ApiResult.cs:line 77 at WorldCities.Controllers.CitiesController.GetCities(Int32 pageIndex, Int32 pageSize, String sortColumn, String sortOrder, String filterColumn, String filterQuery) in E:\Software development\Portfolio\Projects\WorldCities\Controllers\CitiesController.cs:line 34 at lambda_method(Closure , Object ) at Microsoft.AspNetCore.Mvc.Infrastructure.ActionMethodExecutor.AwaitableObjectResultExecutor.Execute(IActionResultTypeMapper mapper, ObjectMethodExecutor executor, Object controller, Object[] arguments) at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.<InvokeActionMethodAsync>g__Logged|12_1(ControllerActionInvoker invoker) at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.<InvokeNextActionFilterAsync>g__Awaited|10_0(ControllerActionInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted) at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.Rethrow(ActionExecutedContextSealed context) at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted) at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.<InvokeInnerFilterAsync>g__Awaited|13_0(ControllerActionInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted) at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResourceFilter>g__Awaited|24_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted) at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResourceExecutedContextSealed context) at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted) at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeFilterPipelineAsync>g__Awaited|19_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted) at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Logged|17_1(ResourceInvoker invoker) at Microsoft.AspNetCore.Routing.EndpointMiddleware.<Invoke>g__AwaitRequestTask|6_0(Endpoint endpoint, Task requestTask, ILogger logger) at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context) ClientConnectionId:42b3bf42-7977-4fc2-a127-afa95f02fc0f Error Number:-2,State:0,Class:11

If I wait long enough (like a really long time), the fetching is getting better (after loads of refreshes). I've tried with the chapter_07 repo and have the same issue.

Issue page 320

In the paper book, the file angular-material.component.ts is wrong, since it is a module and not a component.
The correct name should be: angular-material.module.ts.

Upgrading Angular from 8 to 9

Hello! Long time reader, first time commenter :)

When dotnet creates a new project based on Angular template, it scaffolds Angular 8 packages in package.json. If you update those packages to Angular 9, application stops working from Visual Studio 2019. It just hangs, and Angular portion never starts. And eventually it gives a timeout.

Microsoft has a whole page of suggestions for this situation: https://docs.microsoft.com/en-us/aspnet/core/client-side/spa/angular?view=aspnetcore-3.1&tabs=visual-studio . Among other things, it recommends starting Angular application manually, and then changing in UseSpa()

spa.UseAngularCliServer(npmScript: "start");
to
spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");

However, I am pleasantly surprised that your example of chapter 1 works out of the box! You don't even have the change in UseSpa ( obviously, since you don't need to start Angular manually). Unfortunately, your initial commit is already Angular 9.RC - so it's not exactly the application that dotnet generates.

So I am intrigued - what did you do to make your application work directly from Visual Studio?

HTTP Error 502.5 - Process Failure

I was following the instructions in the main page's Important Note section, except for running the npm-update.bat file, which wasn't anywhere in the repo. I just ran npm update through cmd instead.

Upon running the project in Debug Mode, I got the error noted in this issue's title. Since npm told me there were vulnerabilities, I then decided to run npm audit fix. Upon running the project again, the issue was still there.

This was when I ran the project in Visual Studio 2017. When I ran it with VS 2019, the error was instead was" TimeoutException: The Angular CLI process did not start listening for requests within the timeout period of 0 seconds. Check the log output for error information."

Here's everything in the Stack output:
Microsoft.AspNetCore.SpaServices.Extensions.Util.TaskTimeoutExtensions.WithTimeout(Task task, TimeSpan timeoutDelay, string message)
Microsoft.AspNetCore.SpaServices.Extensions.Proxy.SpaProxy.PerformProxyRequest(HttpContext context, HttpClient httpClient, Task baseUriTask, CancellationToken applicationStoppingToken, bool proxy404s)
Microsoft.AspNetCore.Builder.SpaProxyingExtensions+<>c__DisplayClass2_0+<b__0>d.MoveNext()
Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)

Issue page 160

The attribute [ForeignKey("Country")] is missing from property CountryId on the paper book.
The code in this repository is correct.

Chapter 11: Publish WorldCities Fails at webpack.Progress 95% elifecycle of ng build --prod

Been trying to get this to work for a day. Have used WinMerge to copy Chapter 11's code that I downloaded to my own code. Makes no difference. When I try to publish the actual Chapter 11 project it gets past this stage only to fail on a subsequent stage which tries to copy NuGet packages from my version of the WorldCities project to the folder where I downloaded the book to. I guess I will have to completely replace my code with the book version in order to finally get past this stage and hopefully finish the book before I retire!

In the output, there are multiple errors referring to the 'mat-form-field' and its children not being known elements in the cities.component. All of the stack overflow etc solutions say this is because of modules not being imported, however this is not true in this case as these modules are imported into the angular-materials-module. There are also loads of typescript errors referring mainly to PluginConfig and ProtractorPlugin. It all suggests that some cache has got mixed up. I suspect this may be because I had to downgrade typescript to fix a previous build failure from a previous chapter.

This all reminds me of the 'dll hell' that used to be experienced in the days of classic ASP and COM and more recently when class libraries shared between teams are not maintained properly. This is kind of inevitable when you have loads of disparate teams coding different aspects this technology and trying to make it all work together. It does not endear me to Angular. I wonder if vue.js is this error prone? I suspect it probably is for the same kind of reasons.

Is there a solution which does not involve me overwriting my project from the downloaded project?

Before I finish this, I would like to tell you that I have found the book to be well written and engaging enough to not feel dry and boring at all. I don't often make it to the end when reading IT books, but I have with yours, so thanks for writing this. It has certainly helped me learn the basics of how to include Angular 9 in a .net core project. I will be applying lessons learnt to an app that I am writing now.

Having said that, I would like to add some what I hope you find to be constructive criticism.

The 'broken code myth' disclaimer is a little inaccurate. Despite what you say about how carefully the book was written etc, I have found typos, missing bits and differences between the book's text and the downloadable project code. This has led to hours of frustration when the code wouldn't load pages. I would have preferred the debugging chapter to have been much nearer the front of the book, as I am sure it would have helped in situations when the inital page load either timed out or showed cannot GET.

I am also mystified by the c# code in the SeedController Import() method in the book in which you add "await _context.SaveChangesAsync();" within both for() loops. Any experienced EF developer knows that saving changes one item at a time is very, very inefficient. I amended it by moving the SaveChangesASync() to just below the loops, recreating lstCountries from the context The whole task took a few seconds, not the 15 minutes that you told us to expect. So can you explain why you wrote it this way?

Thanks.

Issue Page 319

In the Paper book, the for attribute for Country label is wrong.

The correct code should be:

<label for="countryId">Country:</label>

Unit Tests are not working

I downloaded the zip file and opened up chapter 1, built everything, and tried to run unit tests and I get this:

The project runs, its just unit tests has these errors and no idea how to fix

Issue Page 519

In the paper book, the code at page 519 is invalid, TIdentityRole and TIdentityUser are not a defined type, and the method is not generic.

Wrong code:

var role Manager = new RoleManager<TIdentityRole>(
                    roleStore,
                    new IRoleValidator<TIdentityRole>[0],
                    new UpperInvariantLookupNormalizer(),
                    new Mock<IdentityErrorDescriber>().Object,
                    new Mock<ILogger<RoleManager<TIdentityRole>>>().Object);
                    
 var userStore = new UserStore<ApplicationUser>(context);
 
 var userManager = new UserManager<TIDentityUser>(
                    userStore,
                    new Mock<IOptions<IdentityOptions>>().Object,
                    new Mock<IPasswordHasher<TIDentityUser>>().Object,
                    new IUserValidator<TIDentityUser>[0],
                    new IPasswordValidator<TIDentityUser>[0],
                    new UpperInvariantLookupNormalizer(),
                    new Mock<IdentityErrorDescriber>().Object,
                    new Mock<IServiceProvider>().Object,
                    new Mock<ILogger<UserManager<TIDentityUser>>>().Object);

Correct code:

                var roleStore = new RoleStore<IdentityRole>(context);
                var roleManager = new RoleManager<IdentityRole>(
                     roleStore,
                     new IRoleValidator<IdentityRole>[0],
                     new UpperInvariantLookupNormalizer(),
                     new Mock<IdentityErrorDescriber>().Object,
                     new Mock<ILogger<RoleManager<IdentityRole>>>().Object);

                var userStore = new UserStore<ApplicationUser>(context);

                var userManager = new UserManager<ApplicationUser>(
                                   userStore,
                                   new Mock<IOptions<IdentityOptions>>().Object,
                                   new Mock<IPasswordHasher<ApplicationUser>>().Object,
                                   new IUserValidator<ApplicationUser>[0],
                                   new IPasswordValidator<ApplicationUser>[0],
                                   new UpperInvariantLookupNormalizer(),
                                   new Mock<IdentityErrorDescriber>().Object,
                                   new Mock<IServiceProvider>().Object,
                                   new Mock<ILogger<UserManager<ApplicationUser>>>().Object);

The application to execute does not exist

Due to compatibility issues, copy-pasting the book's package.json into my template caused a timeout issue. So I then decided to download the projects at this repo, and upon running the solution for Chapter 3, I got this:

"HealthCheck> The application to execute does not exist: 'D:\Documents\VS Projects\ASP.NET-Core-3-and-Angular-9-Third-Edition-"

Three copies, to be exact.

Chapter 5 Client Side Paging

Hello,

The client side pagination implemented in chapter 5 for the section "Client-side paging" does not seem functional. The programming done in that section imports the pagination tools, but never uses it so the pagination has no information linked to it.

The problem seems get resolved once the server-side pagination is implemented later on in the chapter

Adding the Initial Migration Fails

Even though Microsoft.EntityFrameworkCore.Design is installed and can be seen within WorldCities/Dependencies/Packages and WorldCities is the only project, dotnet ef migrations run from the WorldCities root folder still fails with:

"Your startup project 'WorldCities' doesn't reference Microsoft.EntityFrameworkCore.Design." In fact when I run the migration command from the book, I see it remove this package from the Packages folder!

Microsoft documentation basically admits that dotnet ef migrations are unreliable in its documentation and suggests using the package manager console instead. If you can provide a package manager console version of the migration commands from the book, that would be very helpful.

Issue Page 347

In the paper book, the switch statement is missing.

Correct code should be;

switch (fieldName)
{
    case "name":
        return _context.Countries.Any(c => c.Name == fieldValue && c.Id != countryId);
    case "iso2":
        return _context.Countries.Any(c => c.ISO2 == fieldValue && c.Id != countryId);
    case "iso3":
        return _context.Countries.Any(c => c.ISO3 == fieldValue && c.Id != countryId);
    default:
        return false;
}

Issue Page 213

In the paper book, city.ts is defined as:

export interface City {
id: number,
name: string,
lat: string,
lon: string
}

Serialization to decimal of (lat and lon) fails, correct interface is:

export interface City {
id: number,
name: string,
lat: number,
lon: number
}

The code is correct on this repository

Facing error while retrieving all cities or countries

Facing below error while accessing below Api
\Chapter_05\WorldCities\Controllers\CitiesController.cs
Line 29: public async Task<ActionResult<ApiResult>> GetCities

// GET: api/Cities
// GET: api/Cities/?pageIndex=0&pageSize=10
// GET: api/Cities/?pageIndex=0&pageSize=10&sortColumn=name&sortOrder=asc
// GET: api/Cities/?ageIndex=0&pageSize=10&sortColumn=name&sortOrder=asc&filterColumn=name&filterQuery=york

Error description:

ApiResult.cs
+
var data = await source.ToListAsync();

WorldCities.Controllers.CitiesController.GetCities(int pageIndex, int pageSize, string sortColumn, string sortOrder, string filterColumn, string filterQuery) in CitiesController.cs
+
return await ApiResult.CreateAsync(
lambda_method(Closure , object )
Microsoft.Extensions.Internal.ObjectMethodExecutorAwaitable+Awaiter.GetResult()

---

Issue Page 299

In the page 299 of paperbook, on method ngOnInit(). you miss to call this.loadData().

The correct code should be:

ngOnInit(){
  this.form = new FormGroup({
    name:new FormControl(''),
    lat: new FormControl(''),
    lon: new FormControl('')
  });
  this.loadData();
}

Issue Page 304

In the page 304 of paper book, the router link of submit button is wrong.
Since we are in city-edit.component.html, when you post you need to redirect to cities view (not countries).
Correct code is;

<button type="submit" [routerLink]="['/contries']" class="btn btn-default">
Cancel
</button>

Pg 108 ICMPHealthCheck.cs

www.does-not-exist.com does exist and will return a healthy check for all health checks.
this will also need to be amended for all the health checks
I simply used www.nothinghear.com