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.
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.
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.
.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.
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.
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
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
myApp.csproj file should look like this after adding the
Save that file and close it. We are done with it.
Next we need to edit the
.angular-cli.json file so our Angular CLI will build to the
wwwroot folder of our .NET app.
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
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
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
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
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.
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 buildbecause selenium-webdriver includes some
.csfiles 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!
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
Add this line of code just after
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.
Note: Make sure you are in the
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.