Setting Up the Angular CLI in Visual Studio for Mac

Thanks to Dustin Ewers and his blog post for inspiration for this article. Since I come from a frontend perspective and doing development on a Mac rather than Windows there are just a few things I wanted to do differently.

I’ve recently found myself on a new team that develops a .NET web application. I’m a big fan of the Angular CLI and if I’m going to be doing Angular development I REALLY want to have those tools available to me. So faced with trying to develop Angular in a .NET web app I really wanted to make this as easy and familiar as possible. Also, since my native machine is a Mac and .NET Core runs on a Mac and there is now Visual Studio for Mac Preview this is a great time to try to get a .NET app using the Angular CLI up and running completely on a Mac. One thing to note is that this should be relatively the same on a Windows machine with .NET core and Visual Studio.

TL;DR

If you’re a frontend dev that is used to using popular frontend dev tools but you need to develop a .NET app this article will help. You can use .NET Core, Visual Studio for Mac and Angular CLI to develop Angular apps with .NET backends and get the best of both worlds. You’ll be able to use Visual Studio for api development and the Angular CLI for frontend development all within the same project.

Setting up prerequisites

It probably goes without saying but you do need to install the .NET Core SDK for MacOS. You’ll also need Node 6.9.0 or higher. You can just install the one version as is or you can use nvm. I like nvm because it allows for easy node version management so that’s what we’re going to go with for this tutorial.

Now that you have .Net Core SDK installed and nvm installed you need to install the Angular CLI globally.

npm install -g @angular/cli

We’ve got all our prerequisites taken care of it’s time to start building our app!

Create the .NET app

From your terminal open the location where you want your app folder to live. You’ll use the dotnet command to create your app.

dotnet new webapi — name myApp

If all goes as planned you should see the following in your terminal:

Content generation time: 100.7168 ms
The template “ASP.NET Core Web API” created successfully.

Setup Angular CLI app

Make your way into your newly created /myApp folder and we’ll start getting the Angular stuff setup.

cd /myApp

In order for the Angular CLI to work you’ll need to have Node 6.9.0 or higher. Hopefully you chose to use nvm for this. If you did, then the best thing to do is to create a .nvmrc file and specify the version of node you want to use for your project. I always like to be on the bleeding edge so I’m going with version 7.10.0 which is the current version at the time of writing.

Create the .nvmrc file. Make sure you are in the /myApp folder before creating it.

echo “7.10.0” > .nvmrc

This should have created the .nvmrc file and set the contents to “7.10.0”. Run nvm use and it will look at the .nvmrc file and use the node version specified in the file. If the node version is not installed it will install it for you then switch to it automatically.

nvm use
Found ‘.../.nvmrc’ with version <7.10.0>
Now using node v7.10.0 (npm v4.2.0)

Using Angular CLI to Build the Angular App

It’s time to add the Angular piece. This is one place where I have a different opinion from Dustin on how to structure the project. I prefer to keep all of the Angular related things in it’s own folder rather than in the root of the .NET app. That being said, either way is probably fine I just prefer to keep things as compartmentalized as possible. I’m going to create my Angular app in a folder named client because that just makes sense to me. You do you.

ng new client

You will now be able to cd into the /client folder and run any of the Angular CLI commands as usual. BUT we are trying to integrate our Angular app into our .NET app so there’s still a few more things we need to do.

Setting up the details from Dustin’s Blog

All the credit for this section goes to Dustin Ewers.

Edit myApp.csproj

The first thing we need to do it to ensure that we let the Angular CLI compile the TypeScript rather than Visual Studio. To do that we need to edit the myApp.csproj file for our app. First we need to launch the project in Visual Studio Preview for Mac. An easy way to do that is to use the open command.

open myApp.csproj

Now that the project is open, we need to edit the myApp.csproj file. To open the file right-click on your project, “myApp” in this case, in the Solution Explorer. Navigate to “Tools” -> “Edit File”.

Here is where you need to add the following line in the <PropertyGroup></PropertyGroup> tag.

<TypeScriptCompilerBlocked>true</TypeScriptCompilerBlocked>

Your myApp.csproj file should look like this after adding the TypeScriptCompilerBlocked line.

Save that file and close it. We are done with it.

Edit .angular-cli.json

Next we need to edit the .angular-cli.json file so our Angular CLI will build to the wwwroot folder of our .NET app.

Change:

“root”: “src”,
“outDir”: “dist”,

to:

“root”: “src”,
“outDir”: “../wwwroot”,

We want to leave the root folder set as “src” since we’re running our entire Angular app from within the client folder. And since our .angular-cli.json file is in the /client folder we need to set the path to /wwwroot up on level by using ../wwwroot.

Install the “Microsoft.AspNetCore.StaticFiles” NuGet package.

Next we need to install the Microsoft.AspNetCore.StaticFiles NuGet package and configure the Startup.cs file to use our Angular build files.

Click on “Project” -> “Add NuGet Packages”

Search for “staticfiles” and you should see “Microsoft.AspNetCore.StaticFiles” at the top of the results list. Make sure it’s highlighted then click “Add Package”.

Alternatively you can install it using the .NET Core CLI.

dotnet add package Microsoft.AspNetCore.StaticFiles

Edit Startup.cs

We need to take advantage of “Microsoft.AspNetCore.StaticFiles” and add a couple of methods to make our app use the Angular build files. Add these two lines just above the app.UseMvc(); line in Startup.cs.

app.UseDefaultFiles();
app.UseStaticFiles();

Now it’s time to add some middleware courtesy of Dustin to our Startup.cs to redirect any 404 errors to the root file of our app.

Add this block of code just under the loggerFactory.AddDebug(); in the Configure method.

At this point Visual Studio will probably yell at you because `Path` does not exist in the current context.

To solve this you’ll need to at a using statement for System.IO; to the top of your Startup.cs file.

using System.IO;

Your Configure() method in the Startup.cs file should now look like this:

The Setup is complete!

Now you can start building your app. The best part about this for me since I’m a Frontend developer just getting my feet wet in backend development and .NET I can still use the Angular CLI tools like I’m used to.

Running your app from within Visual Studio

All you really have to do to run the WebAPI part of your app is to push the fancy “play” button in Visual Studio.

However, this will not run the Angular piece of the app until you build it using ng build. When you run ng build it will build the Angular app into the /wwwroot which is where Visual Studio looks for your app.

ng build

Now that you’ve built your Angular app just push the “play” button in Visual Studio and you should see you’re default Angular CLI app in the browser!

NOTE: I could have run the entire thing using just the .NET Core CLI but unfortunately when using the Angular CLI you get a build error when you try to build with the .NET Core CLI using dotnet build because selenium-webdriver includes some .cs files in the npm package and the .NET Core CLI tries to build these files as well. The funny thing is that as long as you build it for the first time using Visual Studio you can then run it via the .NET Core CLI all day long. I have yet to figure out why and if anyone knows please let me know.

Taking Advantage of the CLI Goodness

Since I’m primarily a frontend developer and have gotten used to live browser refresh when making changes, having to run ng build after every change would be time consuming and frustrating. There is good news though! You can still use the CLI just like you did before!

Configure CORS

When you run the app from Visual Studio it will run on a different port than the Angular CLI. This is not a problem if you use ng build but if you want to take advantage of all the awesome that is Angular CLI you’ll have CORS issues when making http calls in your app.

The good news is that CORS is already added to your .NET Core app. It just needs to be configured. Add the following code to the “ConfigureServices()" method in Startup.cs.

app.UseCors(“CorsPolicy”);

Add this line of code just after loggerFactory.AddDebug(); in Startup.cs.

app.UseCors("CorsPolicy");

Your Startup.cs file should now look like this:

You’ll also need to set a more static port number for the api. You’ll do that in the Options for your Visual Studio project.

Click on “Run” -> “Configurations” -> “Default”. Then Click the “ASP.NET” tab. Change the port to 5000 then click “OK”.

Now when you make your http call from your Angular app you won’t experience any CORS issues.

Run it using the Angular CLI

Now you can run your app using the Angular CLI and make http calls to your .NET Core api.

ng serve

Note: Make sure you are in the /client folder.

You should be able to browse to http://localhost:4200 and develop your Angular code just like you always have! This includes running the app from within Visual Studio but still being able to use Visual Studio Code or whatever text editor you are used to for the Angular code.

I’ve provided a working version of the app complete with an http call to the default “Values” controller in the .NET app. You can fork this GitHub repo.

Thanks for reading and I hope this has helped. For me it was a HUGE relief that I could still use the tools I am used to and prefer in this new environment that I find myself.