ASP.NET Core 2 Fails to Publish With Angular 5

I had an issue opened on my Identity Server GitHub repo saying that publishing the client application fails with something like the following error when using server-side rendering.

Can’t resolve ‘./../$$_gendir/ClientApp/app/app.module.browser.ngfactory’

This was only an issue after moving the project to target Angular 5. After some research, it turns out that Angular tools for Webpack has to use a different plugin for ahead of time compiling for Angular 5+. I ended up finding a fix in this issue.

The Fix

In order to resolve the issue, I made the following changes in the  webpack.config.js file. The first change is in the require statements at the top of the file.

Next, make the following replacement in the rest of the file, which should only be two places.

Wrapping Up

Most of the projects I reference on this blog are written to specifically target the topic I am trying to cover and as such I miss things like testing publish since I’m never going to production with these applications. I really appreciate those of you who find issues and take the time to open an issue on GitHub. Keep them coming, and if you find a solution before I do feel free to submit a pull request.


Three Years of Blogging

This Thursday will be the third anniversary of my first post to this blog. This post is going to be similar to the post I did last year in the form of a retrospective.


Most of my positive points are the same as last year. I guess I shouldn’t be surprised as these are the reasons I spend my free time working on the blog.

  • Driver for learning new things
  • Opportunity to use new/different technology outside of my normal work
  • Helping others learn new concepts
  • Helping others overcome problems
  • Made my first contributions to open source
  • Comments from readers letting me know posts were helpful
  • No big hosting issues this year (thank you NodeHost!)


Again most of the challenges are in line with what they were last year. I guess I should take that as a red flag and focus on solving some of my challenges instead of living with them.

  • Learning new things on a deadline
  • Self-applied pressure to meet my goal of a post a week (increasing my stress level)
  • Not focusing on stats, shares, comment, etc.
  • Picking the right things to learn
  • Time requirements taking away from other projects I would like to do

Top posts of the year

I was a little surprised at the makeup of this list. I expected to have more than a single repeat from last year’s list.

I did a series of posts looking at Identity Server 4 this year that didn’t make the above list individual, but as a total, the series was huge for me last year. If you are interested you can check out all the posts here.


There are a couple of resources that I want to point out.

ASP.NET Weekly is a weekly digest of all the best ASP.NET related news and blog post run by Jerrie Pelser. Jerrie does a lot of good work in addition to ASP.NET Weekly including a blog and a book.

ASP.NET Community Standup is straight from the team at Microsoft who is responsible for ASP.NET Core. These videos are a great way to get the scoop on what is in the works. Also, note that if you have watched in the past this show has moved from Scott Hanselman’s YouTube channel to .NET Foundation’s channel so update your subscriptions.

John Sonmez’s free blogging course is what finally pushed me over the edge to start blogging. It is a great resource to help get you moving.

NodeHost is my hosting provider. They provide super simple and cheap hosting. If you are looking for a place to host your own blog check them out. Combine them with Cloudflare and Let’s Encrypt and you are all set if you are going to WordPress route.

The next year

As usual, I am looking forward to seeing where ASP.NET Core goes next. Things like SignalR Core, HttpClientFactory, Entity Framework Core improvements are going to be great to explore.

Outside of ASP.NET Core, I am looking at putting out a very basic Xamiran app. Based how that goes you may see a few posts related to Xamiran in the next year.

If there is a topic you would like to see covered leave me a comment and I will add it to my list of things to look at.

Entity Framework Core with Postgres

With last week’s post, I now have Postgres running in a Docker container. This post is going to cover using Entity Framework Core with Postgres which will happen to be running in the Docker container from last week, but that bit isn’t a requirement for this post. This post is going to be very similar to this one which covered Entity Framework Core with SQLite.

Starting Point

Using Visual Studio 2017 I started with a new ASP.NET Core project using the Web Application template with Individual User Accounts for Authentication. Using Individual User Accounts is an easy way to get all the Entity Framework Core stuff setup.

Add Postgres Nuget Package

Right-click on the project file and click Manage NuGet Packages.

On the Browse tab search for  Npgsql.EntityFrameworkCore.PostgreSQL and then click install.

Configuration Changes

Open the  appsettings.json file and change the  DefaultConnection in the  ConnectionString section to a valid Postgres connection string as in the following example.

Not that a user ID and password are needed. If you are going to be checking your project into source control I recommend in addition to the above you only store the connection string with the real user ID and password in user secrets which don’t get checked into source control. You can find more information on user secrets here.

Startup Changes

The final change needed before running the application is in the  ConfigureServices function of the  Startup class to switch out SQL Server for Postgres. The following shows an example of the change for the  ApplicationDbContext.

Run the App

Running the application at this point will work fine until you hit a function that wants to talk to the database. For example, attempting to register a user would result in the following error.

If you see this error don’t panic just follow the instructions and they will get you going. The simplest solution is to just click the blue Apply Migrations button and continue your testing.

Wrapping Up

The application is now ready to go using Postgres. The Entity Framework Core team, as well as the Postgres Entity Framework Core Provider team, have done a great job making everything work with no pain.

The official docs for the provider can be found here. I would love to offer some tooling recommendations for working with Postgres, but I haven’t been working with it enough yet to provide any. If you have any Postgres tools you recommend please leave a comment.

The code in its final state, which has been expanded to include my standard contacts example, can be found here.

Setup PostgreSQL on Windows with Docker

Over the weekend I finally got the chance to start reading A Curious Moon by Rob Conery which is a book on learning PostgreSQL by following the fictional Dee Yan as she is thrown into database administrator role at an aerospace startup.

I have a lot of experience using Microsoft’s SQL Server, but up until now, I haven’t touched PostgreSQL. For personal projects SQL Server’s cost and be prohibitive and the release of Rob’s book added up to a good time to give PostgreSQL a try.

Install Directly or not?

On the download section of the official Postgres site, there is an option to download an installer. This is the route I was going to at first, but in Rob’s book, he suggests using a VM for Postgres installation on Windows. This kicked off a lot of searching on my part and didn’t find a good definitive answer on why that is or isn’t the way to do.

In the end, I decided to try and run the Postgres process using Docker instead installing directly on Windows or dealing with a full VM.

Installing Docker

Head to this link and click the Get Docker link to download the installer. After the install is complete you will have to log out and back in. When I logged back in I got a message about Hyper-V not being enabled.

After logging back in I then got the following message about hardware-assisted virtualization not being enabled.

After tweaking my BIOS settings and logging back in I was greeted by the Docker welcome screen.

Open a command prompt and run the following command.

You should output that starts with the following if your installation is working.

Hello from Docker!
This message shows that your installation appears to be working correctly.

What about Postgres?

Getting up and going with a container running Postgres was pretty simple and could be done with the following command which will create a container and expose the port used by Postgres so it can be accessed from the host.

The problem with this approach is if you ever need to rebuild the container for some reason, like a new version of Postgres is released, your data will be lost. Thankfully I found this blog post which shows how to use a secondary container for the data leaving the Postgres container able to be destroyed and recreated as needed. The following is the command I used to create my data container.

The above creates a container named PostgresData based on the Alpine image. It is important that the  -v parameter matches the path that Postgres expects.

Now that we have a container that will keep our data safe let’s create the actual Postgres container with the following command.

The only difference from the first example run command is the addition of  --volumes-from PostgresData which tells the container to use the PostgresData container.

If you run the  docker ps -a command it will show you all your containers.

As you can see in my example I have two containers only one of which is actually running. Make sure you don’t remove the data container just because it will never show as running.

Connect to Postgres

To verify all was working I downloaded pgAdmin from here. Run the installer and then open the application. Right-click on Server and click Create > Server.

On the Create Server dialog enter a Name for your server and then switch over to the Connection tab.

On the Connection tab for Host use localhost and in the Password field use the password you used for POSTGRES_PASSWORD on the docker run command.

Click Save to close the dialog and connect to the server. The following is an example screenshot of what you will see showing the available databases on the server, which is just the default database in this case.

Wrapping Up

Make sure to check out the official docs here for more information as needed.

Other than the storage portion getting Postgres up and running in Docker was pretty simple. I hope like me this will give you a good jumping off point to learn more about both Docker and Postgres.

If anyone has any alternate ways to deal with persistent storage please leave a comment.

Trying the New ASP.NET Core Angular Template with CLI Support

I got hit by the flu that has been going around and now that the fever has passed I thought it would be a good time to try out the new version of the Angular template for ASP.NET Core that works well with the Angular CLI.

Template Installation

Note that at the time of this writing the templates are in the release candidate stage and a new version could be available by the time you are reading this so make sure and check this page for potential updates.

Running the following command from a command prompt will install the RC version of the templates.

Project Creation

Create a directory for the project and navigate to it in a command prompt. Run the following command to create the new Angular project.

Next, if you have a solution you want to add the new project to that can be done with the following command adjusting for the naming of your project and solution.

Installation of Angular CLI

From the command prompt run the following command to install the Angular CLI globally.

After the above, I got the following error trying to run any Angular CLI commands.

You seem to not be depending on “@angular/core”. This is an error.

The problem ended up being that I had not installed all the packages for the project. The issue was cleared up by the following command.

Angular CLI Usage

Navigate to the ClientApp directory and you can then use all the Angular CLI commands as you would in a stand along Angular application. Some of which can be found here. If you are looking for a quick command to verify all is work the following command works well by running a linter on your project.

Wrapping Up

Having templates that are compatible with the Angular and React CLI is a big step forward. The CLIs provide a lot of functionality and by having a setup that doesn’t restrict their usages is a great move. Make note that server-side rendering is no longer enabled by default, but can still be enabled for Angular projects, but not React based projects.

I recommend you check out the official documentation which can be found here.

I hope we see these functionality moves to the other templates that are outside of the templates in this package in order to support Aurelia and Vue.

Identity Server: Migration to version 2.1 and Angular HTTP Changes

Version 2.1 of Identity Server 4 was released a few weeks and this post is going to cover updating my sample project to the latest version. The starting point of the code can be found here. We are going to tackle this in sections as there are updates needed for an ASP.NET Core Update, Identity Server Update, and some broken bits in Angular.

ASP.NET Core Update

The sample projects were all on ASP.NET Core version 2.0.0. For each project right-click and select Edit ProjectName.csproj. Make the following change.

Identity Server Update

Right-click the Identity App project and select Edit IdentityApp.csproj. Next, make the following changes.

Next, need to add a couple of Entity Framework migrations to see if there were any data changes with the following commands from a command prompt in the Identity App project directory.

Turns out that there were no data changes for this version so if you are on version 2.0.0 you can skip this step.

Angular Issues

I’m not sure how I didn’t hit this issue on the last update post, but the Client App needs to be changed to use the new Angular HttpClient. I got the following error when trying to run the client application.

An unhandled exception occurred while processing the request.

NodeInvocationException: No provider for PlatformRef!
Error: No provider for PlatformRef!
at injectionError
After some digging, I tracked the issue down to using HttpModule instead of HttpClientModule. To make this transition we need to make a few changes. In the app.module.shared.ts make the following changes to the imports section.

Next, in the imports array make the following change.

Next, in the webpack.config.vendor.js fille add the following to the vendor array.

The last changes are to the auth.service.ts and they are extensive so instead of going through them I’m just going to post the full class after all the changes.

With all those changes made run the following two commands in a command prompt in the Client App project directory.

Wrapping up

This post ended up being more about Angular than Identity Server, but it is nice to have everything upgraded to the latest and working.

The files in the completed can be found here.

Broadcast from an ASP.NET Web API to a UWP Client using SignalR 2

I recently had to take an existing ASP.NET Web API (not core) that was used by a UWP (Universal Windows Platform) client to pull information and modify it to receive notifications from the Web API under some situations. This post is going to cover the creation of a Web API and UWP projects and the modification of the projects to allow notification from the Web API to the UWP client.

Web API Project Creation

In Visual Studio we need to create a new project for the Web API using File > New > Project.

We will be creating an ASP.NET Web Application (.NET Framework) and I’m just naming the project Web API.

On the next screen select that we want a Web API application.

UPW Project Creation

As above in Visual Studio we need to create a new solution and project for the UWP Client using File > New > Project from a new instance of Visual Studio. Select the Blank App (Universal Windows) template.

Next, you will be prompted for the versions of Window 10 to support with the UWP application. I just took the defaults.

You may also want to set your PC into Developer mode.

Add SignalR to the Web API

Now that the initial project creation is done let’s add SignalR to the WebApi project. Inside of Visual Studio right-click on the project and select  Manage NuGet Packages.  Select the  Browse tab and in the search box enter  SignalR and we are looking for the  Microsoft.AspNet.SignalR package. Select it and click the Install button.


Now that SignalR is installed it needs to be configured on startup of the application. To do this add a  Startup class if it doesn’t exist with the following contents.

The  hubConfiguration bit is only needed if you want to change the default settings. In this example, we don’t have any JavaScript clients so we don’t need those proxies and we are learning so detailed errors will come in handy.


The first thing we need to do is create a new hub which is what SignalR uses to do all of its magic. Hubs are what enable the server (and/or client depending on how you are using it) to make remote calls. Since we are just doing a broadcast the hub class is empty except for a reference to the class that will be handling when to send the broadcast. This property is very important since it will be the trigger for Broadcaster to get instantiated when a client connects.  The following is the full class.

Make note of the hub name used as we will need it on the client side.

Next, we have the class that actually does the broadcasting. The following is the full class.

The above is a singleton which gets created with the list of clients for a specific hub which can be seen in the following line. It has been reformatted from above to try and make it a bit more readable.

The constructor of the class sets up a timer that calls a  Broadcast function which sends the current date and time to all the connected clients. This could be any sort of data, but for this sample, I’m keeping it simple.

Add SignalR to the UWP Client

Now over in the UWP project, we need to add the SignalR client by right-clicking on the project and selecting  Manage NuGet Packages. As in the Web API instructions above search for  SignalR using the  Browse tab. Select the  Microsoft.AspNet.SignalR.Client package and click  Install.


To keep the sample as simple as possible we are just going to add a  TextBlock to the  MainPage.xaml to display the results of the broadcast from the Web API. The following is the full code for the page.

Now in the code behind we need to connect to the hub on the Web API and define what happens when a broadcast is received. The following is all of the code in the code behind which will be followed up with some comments.

The  hubConnection as you might expect controls the connection with the server and the  hubProxy deals with the interaction with a specific hub. In our case, we are saying with the  Broadcast function is called on the server we want the client to update the  BroadcastResults.Text with the value from the server.

Wrapping Up

Run the Web API and then UWP application and you will see the date time from the server being shown on the client. This is, of course, is the simplest of use cases for SignalR, but it is a great jumping off point to go deeper.

This tutorial from the official docs helped a lot when getting my sample up and running.

The code for this sample can be found here.

Change ASP.NET Core from npm to Yarn

Over the past couple of months, I have been having some issues with npm. Between the upgrading of npm Windows begin a pain and a version incompatibility with node I have just gotten frustrated with it. This post is going to cover the steps to use Yarn as a replacement for npm in an ASP.NET Core application.


The first step is to get Yarn installed. Head over to this site and download and run the installer for your operating system.

For Visual Studio, Mads Kristensen created an extension for Yarn that makes the integration much better. The installer for the extension can be downloaded from here.


Open a command prompt in the same directory as your project’s  package.json file and run the following command.

This will create a  yarn.lock and lay out the  node_modules folder using Yarn’s resolution algorithm.

I did hit the following error when I did the  yarn command. I left out the specific file that it had an issue with because I am sure yours would be different.

To clear the issue I just deleted the  node_modules directory and let Yarn recreate it. It might also work to use a command prompt with administrator privileges.

Visual Studio

With the Yarn extension installed there are a couple of settings that are helpful to change. All the setting we will be changing can be found under the Tools > Options menu. The first is to have  yarn install run when the  package.json is saved. Look under  Web > Yarn Installer for this option.

The second setting is to turn off automatic NPM restore so packages are restored twice. This requires the options under NPM to be set to false. The options can be found in  Projects and Solutions > Web Package Management > Package Restore.

The extension helps with Yarn integration, but the integration still isn’t as full-featured as using NPM. At my current level of frustration having to manually restore package when I open a project on a new PC is totally worth it.

Wrapping Up

So far Yarn has been great and I have not hit any issues, but my usage has also been limited. It seems like a solid alternative to NPM.

Make sure and check out Yarn’s official post on migrating from NPM which can be found here. Of specific interest will be the CLI command comparison which can be found here.

Auth0: Usage from Angular

This post is a continuation of my exploration of using Auth0 with ASP.NET Core with an API and an Angular front end. I recommend you start with the first post if you are new to Auth0.

This post is going to add a login from Angular in the Client Application as well as accessing the API once logged in. The starting point of the code can be found here.

API Application

To give us an endpoint in the API to call let’s move the  SimpleDataController class from the  ClientApp/Controllers directory to  ApiApp/Controllers directory. Also, remember to adjust the namespace to reflect this move.

To remove some complication we are going to add a CORS policy to the API Application to allow all CORS request. This wouldn’t necessarily something I would recommend for a production application. For more information on CORS check out this post.

To add the CORS policy open the  Startup class and add the following to the  ConfigureServices function which adds a CORS policy to DI that allows all calls through.

Next, in the  Configure function, CORS needs to be added to the HTTP pipeline with the policy added above. The following is the full function body for reference, but only the CORS line is new.

Note that the API isn’t currently using Authorization at all and won’t be for this post.

Client Application

Instead of redoing a lot of the same work that I covered in some of my posts on using Identity Server and Angular together I decided to copy the ClientApp directory and use it as a starting point. The rest of the client changes are going to assume the same starting point which means we will be using angular-auth-oidc-client instead of the Auth0 client to do the Open ID Connect bits.

Configuration values from appsettings.json

We need some setting from the ASP.NET Core part of the client application. First, add the following new settings to the  appsettings.json file.

Next,  Index.cshtml needs to be changed to provide some prerender data. The following shows the new data being passed into the Angular application (this post covers this in detail).

Now that the prerender values are being passed in we need to handle them in the  boot.server.ts file in the  createServerRenderer export. The following is the full list of values.

Down a bit in the file, the  setImmediate call needs to be changed to the following.

Next, in the  app.module.browser.ts file we need functions for getting the config values as well as the associated providers. The following is the full file without the imports.

Finally, in the  auth.service.ts file we need to inject the new configuration values. The following is the constructor that takes in the new values as well as uses them in the set up of the  OpenIDImplicitFlowConfiguration.

Make sure in the Auth0 client setup you allow the callback listed above or you will run into issues.

Wrapping Up

Working on this post further convinced me that Open ID Connect is the way to go. I basically took an implementation that was meant for Identity Server and used it with Auth0.

Make note that the reason the API is unsecured at this point is that I had an issue getting angular-auth-oidc-client to play nicely with Auth0 for some reason. I doubt it is an issue with either product just some sort of missing configuration on my part. This is the part of the post that I sunk so much time on. In the end, I decided to just skip it for now. If anyone does get that setup work I would love to see the sample so I know what I was doing wrong.

The completed code can be found here.

Welcome to 2018

This isn’t the post I had planned for this week, but thanks to a failed automatic upgrade of one of the WordPress plugins this site uses I had to restore a back up of the site which destroyed a lot of the post meant for this week. Thankfully NodeHost does automatic backups every day and the restore process is super simple.

On the positive, it gives me a chance to try out something new. I am going to list the books that I read last year. For the ones that are available on Amazon, I am using affiliate links just to see what happens. A lot of these books come from John Sonmez’s book reviews playlist. Without further adieu here is the list broken out by rough category.


Elon Musk: Tesla, SpaceX, and the Quest for a Fantastic Future
Living with a Seal (I laughed a lot on this one)


EntreLeadership (Free gift from CodeStock 2 years ago)
The Phoenix Project


The Obesity Code (Very informational if you struggle with weight read this one)


The Kazdin Method for Parenting the Defiant Child

Personal Development

Think and Grow Rich
Triggers: Creating Behavior That Lasts
Never Split the Difference: Negotiating As If Your Life Depended On It
Banish Your Inner Critic
The Energy Bus
Eat That Frog!
The 10X Rule
Peak Secrets from the new Science of Expertise
Moonwalking with Einstein
Deep Work


SOLID Principles Succinctly
.NET Core Succinctly
Little ASP.NET Core Book
The Imposter’s Handbook
The Complete Software Developer’s Career Guide

Top Picks

The Phoenix Project is at the very top of my list from 2017 it uses a story to teach lean concepts from an IT perspective. I which I could get everyone in my company to read this book.

The Energy Bus helped me adjust my perspective and have a more positive outlook on life. If you have any issues with negativity check it out.

The 10X Rule is pretty high on my list as well. This book will get you taking action toward your goals if you follow its advice.

If you have any recommendations leave a comment as I am always looking to add new books to my backlog.