Archive Monthly Archives: March 2017

Angular CLI With .NET Core

Angular is a fantastic platform for building rich client side apps, but let’s not forget about the back end. My choice for the back end is ASP.NET Core. If you’re not shy about spending a bunch of time setting up Webpack, Angular and ASP.NET Core is a fantastic combination.

However, I prefer to spend my time building applications, not configuring build tools. Angular CLI takes a lot of the pain out of using Angular, but it’s a self contained command line tool. Fortunately, Angular CLI and ASP.NET Core can happily co-exist. In this post, we’re going to build an application using these two technologies together. By the end, you’ll be ready to have all the goodness of Angular and ASP.NET Core without spending a week setting up Webpack.

Prerequisites

Make sure you have .NET Core, Node.js and Angular CLI installed.

https://www.microsoft.com/net/core#windowsvs2017

https://nodejs.org/en/

npm install -g @angular/cli 

Getting Started: ASP.NET Core App Setup

Fire up Visual Studio (I’m using VS 2017) and create a new ASP.NET Core Web Application. Select the Web API Starter. This doesn’t bring in any web stuff, which is ideal. We’re going to use Angular CLI to generate the client files.

Then go ahead and disable automatic Typescript compilation. We want CLI to compile our Typescript, not Visual Studio. Do this by adding the “TypeScriptCompilerBlocked” line to your csproj file.

Head on over to the Startup.cs and add in the static files middleware. You’ll have to install the “Microsoft.AspNetCore.StaticFiles” NuGet package. After that, add app.UseDefaultFiles() and app.UseStaticFiles() to your Configure() method.

After you get those setup, you’ll want to add some middleware to redirect those pesky 404s to the root file. This will allow you to navigate the application without having to start at the root each time you hit refresh. For this app, api routes are prefixed with “api”, so we’re excluding those routes from the check. We’re also excluding routes with a file extension since those are likely static assets.

To prevent the app from loading up the api/values endpoint by default, go to properties/launchSettings.json and change the “launchUrl” keys from “api/values” to “”.

At this point, our .NET Core app should be ready to go. Let’s move on to the Angular code.

Setting Up Angular CLI

We’re going generate our Angular app on top of our ASP.NET core app. To do this, go to the command line and navigate to the directory of your solution file. Then run “ng new <your app name>”.

You want the <app name> part to be the same as your .NET Core source folder. This will drop all of the CLI files into your ASP.NET Core root folder. It should look like this:

Gluing It All Together

Angular has a default file structure, but it’s not ideal for the existing ASP.NET Core application. Fortunately, Angular CLI has some options that will allow us to change this structure. We want the client side code to be in a folder called “client-src” and the client side build artifacts to go to the wwwroot folder. To do this, rename the “src” folder to “client-src”. Then go to go to .angular-cli.json. This is the primary configuration file for Angular CLI. First, change “src” to “client-src”. Then change the “outDir” attribute from “dist” to “wwwroot”. This will drop all of the compiled assets into the wwwroot folder.

At this point, we can build the Angular application using Angular CLI. Navigate a command prompt into the main application folder and run “ng build”. This command will build the client side part of the application, dropping the build artifacts into wwwroot. The wwwroot folder should look like this:

  

At this point we should be able to run the app by hitting the Run button in Visual Studio. Unfortunately, we still have a two stage build pipeline. The first step being “ng build” to generate the client side files and then running the .NET Core app. To fix this, we can drop in a post build script: “ng build — aot”. This will compile the client side files (with ahead of time compiling) after the app builds.

Bonus Points

If you’re using git, you’ll want to add the wwwroot folder to your .gitignore file. These files are generated, so you probably don’t want to check them in.

Example Code

All of the demo code used in this post is available here:

https://github.com/DustinEwers/shiny-angular-demos/tree/master/ninjas-quest-cli-core/ninjas-quest

This demo includes a full Angular application on top of ASP.NET core. Feel free to use this as a template or something to look at while building your own. You now have everything you need to get started building shiny applications using Angular CLI and ASP.NET Core.

Book Review – Crucial Conversations

Ever find yourself in high stakes situations where even the slightest miscommunication can bring everything crashing into the ground? If so, Crucial Conversations has you covered. Crucial Conversations is a book about how to better navigate high stakes conversations. Unlike most business books, Crucial Conversations is packed with actionable information.

Why bother?

Why is this an important skill for developers? People think software development as a process where people in a windowless basement turn pizza and caffeine into software. The reality is that software development is more about communication than technology. We build software in teams. We build software for people. We need to figure out what those people want. We need to be able to have honest conversations when things don’t go as planned (which is always). Creating a free flowing dialog is absolutely essential to creating valuable software.

Beyond building software. Developers who want a lucrative career find themselves in high stakes negotiations. These include, project scope discussions, salary negotiations, and job role discussions. Learning how navigate these situations can add thousands of dollars to your lifetime earnings. Not bad for a $10 book and a few hours of reading time.

Main Ideas

Everyone has high stakes conversations. These include high pressure negotiations, impassioned arguments, and delicate interventions. Crucial conversations come in many different flavors. What links them together is that the results of these sorts of conversations have an out-sized impact on your life. Screw up one of these and you could be feeling the pain for years to come.

The key to navigating crucial conversations is to keep a free flowing dialog between the participants. To create free flowing dialog, maintain psychological safety. The primary goal of someone in a crucial conversation is to create and maintain a psychological safe space where both parties can express themselves without fear of anger or retribution. If everyone can get everything onto the table, you can usually figure out the correct path.

To cultivate psychological safety, you need to control your own emotions. Many people cast their own stories into “victim and villain” narratives. Playing the victim causes other people to get defensive. This defensiveness erodes psychological safety. Without psychological safety, people retreat to “silence or violence”. They either shut down or defend themselves with hostility. Usually emotional and verbal hostility, but sometimes physical hostility. Responding to a conversation with silence or aggression is “the fool’s choice”. Avoid the fool’s choice at all costs.

The book describes many techniques to maintain dialog. I’m not going to list them all out here, but a few include:

Shared Purpose
People generally have some shared goal in the conversation. Reminding people of that goal can inspire mutual cooperation.

Contrast and Clarification
Use contrast to clarify what you want. Prevent misinterpretation. Everyone has a plethora of cognitive biases. It’s easy to misinterpret wants and needs in high pressure situations. Contrast what you actually want with what people think you want.

“Start with Heart”
Figure out what you actually want from a situation and take your ego out of the equation.

Related Concepts

Radical Candor
Radical candor is where you are willing to challenge people directly, but with a high degree of empathy. It’s the useful alternative to being a wimp or an asshole.

Find out more about it here: https://www.radicalcandor.com/about-radical-candor/

Cognitive Distortions
People have a variety of intellectual distortions. These are also referred to as cognitive biases. Watch out for cognitive distortions in yourself or others. There are dozens of these, but Psychology Tools has put together handy chart detailing some of the major ones:

Web site – http://psychologytools.com/unhelpful-thinking-styles.html
PDF – http://media.psychologytools.com/worksheets/english_us/unhelpful_thinking_styles_en-us.pdf

Ego is the Enemy
A big part of being a better negotiation is learning how to disarm your ego. Lots of people forget their mutual goal and try to “win” an argument. This is usually waste of time. Focus more on your goal and less on yourself. Ryan Holiday has a fantastic book about this.

Ego is the Enemy (Amazon)

Conclusion

Being able to successfully navigate tough conversations is an essential developer skill. Crucial Conversations has a variety of techniques to better navigate high stakes conversations. For the sake of yourself and everyone who has to work with you, work on your communication skills.

Crucial Conversations (Amazon)