How to Create a .NET Core 2.1 Angular 7 Project
Mon Oct 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?"
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.
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
rm -rf ClientApp
Now let's use Angular CLI to generate our new
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.
It worked. Beautiful!