How to Create a .NET Core 2.1 Angular 7 Project

October 29, 2018

I've been using a Mac for the past 8 years (full-time for 6) so it seems strange that I'm currently in the .NET and C# world. My initial trepidation began with the thought, "wait, do I have to buy a Windows machine?"

I mean, this is the modern day Microsoft here. So I'm currently very happy using VS Code as my daily driver (only venturing back to Emacs to take reading notes with Org Mode). I prefer TypeScript over JavaScript for most non-trivial coding projects. Suffice it to say, obviously I am able to develop .NET Core applications on the Mac now. No more excuses.

When I took a look at the code base I was to work with, I had a bit of a shock. It looks like it was a well-intentioned simple landing site with a small form to subscribe to a newsletter and also a page to login to the company's application. What had happened was after hiring many different developers with "fairly diverse" skills/skill-sets, they ended up with a stale .NET Razor Pages application that served nothing but hard-coded HTML with inline styles. This was the most complex pile of CSS puke I've ever seen.

Obviously, it was quite unmaintainable but I started to crank away at fixing the CSS by first trying to clean up the inline styles and put them in their own file. This proved to be such a time sink and with consultation from the client, we decided to scrap the entire landing site they had and start fresh. (The client had already wanted a fresh reboot of their site, but I think the person they hired was just taking one-off suggestions from the client and going through each element to change the inline styles. That didn't work out very well for the contract developer, nor the client.)

I'm glad you stuck with me through the long background story. Now here's what I decided to do.

Download .NET Core SDK through Homebrew:

brew cask install dotnet-sdk

There's a caveat here. Initially I needed to run .NET Core v.1.1.2 since that's what they had running on their old site. That's only available here on SDK 1.0.4. Since I'm starting fresh, the newest .NET Core SDK from Brew Cask is the one we're going with.

One really cool thing I didn't know is that the dotnet CLI will generate new projects with many different templates. Take a look at the docs to see what else you can do.

dotnet new angular -o my-app

This will generate a new app with the Angular client in the ClientApp directory. To check out what just got built with only 1 command, run:

dotnet restore
dotnet build
dotnet run

The build process will take care of installing all of the NPM dependencies. The run process will run both the back end server as well as the front end client so all you have to do is open localhost:5000 on your browser.

default project screenshot

There you go. You now have a .NET Core application serving an Angular front end. You can stop here.

Unless you wanted to have the newest Angular version.

The Angular version shipped with this template is 5.2.X which is actually pretty great to start with. I mean, who really wants to be on the leading edge of what's new in Angular? Well, we probably don't need it, but let's try to get the newest version we can.

One option is to go through the Angular Update Guide. I'll say this. I tried it. I don't think it's worth it.

You will have to go through npm install multiple times to resolve issues with dependencies. It's just a time sink.

The easiest and best way to get a new Angular client is to use Angular CLI and it's no different in our case as well.

First off, let's shut down the server and get rid of the current ClientApp directory.

rm -rf ClientApp

Now let's use Angular CLI to generate our new ClientApp:

ng new ClientApp --routing --skip-git --style scss

(If you don't have it already, install Angular CLI on NPM globally.)

The parameters are optional, but I just wanted Angular CLI to generate a project with routing already baked in using SCSS for styles. Since this project will be in our .NET project, we won't need our "ClientApp" to be its own Git repo. Another great option is --prefix where you can specify the prefix for the selector the new component will have when using the ng generate command. You can change the prefix manually in the angular.json file as well.

Alright, time for the payoff. Did it work? Was it really that simple?

We won't need to rerun dotnet build since Angular CLI took care of installing all the dependencies.

dotnet run

update angular screenshot

It worked. Beautiful!


I'd like to send you a weekly recap of all the articles I write as well as my take on the latest news on web development with Vue, React, Elixir/Phoenix, and others. Just fill out your email and name below!

Prev: NodeJS vs. Python 3 Performance
Next: Passing CLI Arguments in a .NET Core Project