Tutorial: ASP.NET and Angular

A quick tutorial on setting up an Angular app on an ASP.NET webserver

November 17, 2017
.NET Angular Tutorial

So, I've seen a ton of tutorials online about getting Angular 2+ running in .NET Core. If you're like me, and you're too lazy to figure out .NET Core, or more likely - you work at a corporation that's fiddling around with Angular, but doesn't use .NET Core, this post is for you.

Note - we're going to set this up as an MVC app. If you're building a single-page app (SPA), then chances are you're going to have HomeController.Index method that's pointing to a single view that your JS app sits in. Overhead? Yes. Easy and not requiring you to learn new things? Yes.

Instructions

Setting Up the .NET App

  1. Go to File > New Project > Visual C# > Web > ASP.NET Web Application (.NET Framework)
    Create Project
  2. Select MVC under the templates option, make sure there's nothing else selected. Leave authentication at "No Authentication".

And, done. Once the app gets created, feel free to press Ctrl + F5 to build and run, just to make sure it works.

Installing Angular

  1. Open up the folder that contains your web application. You should be greeted with something that looks like this:
    File structure
  2. Open up the command prompt from here. The fastest way to do this is to click on the location bar at the top, type in "cmd", and press Enter. This will open up your command prompt to the current folder.

  3. If you haven't done so, install the Angular CLI globally
    npm install @angular/cli -g
  4. Now we're going to generate the Angular app. The CLI generates a root folder with a src folder and other goodies within it. Because I want those folders/goodies to be in the same folder shown above, lets move up a folder before generating our app - and generate it with the same name as the existing folder there. It looks like this:
    cd ..
    ng new MyTestApplication
    Hold up for a bit - The CLI is going to install a bunch of npm packages, this might take a while

Running your Angular app using ng serve

Your Angular app is now set up and ready to go. You can now run...

cd MyTestApplication
ng serve -o

... to have the CLI run a webserver, serving up some tasty Angular action.

But wait, don't we want to run this thing as an MVC App??

... yes. But here's where the secret sauce is - we're letting Angular handle all of our views, so we're going to be dealing with some plain html - specifically the index.html that the Angular CLI provides.

Hooking Up the Angular App to the Webserver

  1. When we run our MVC app, we want the base route to go grab our base Angular HTML file, instead of interacting with cshtml in any way. Head on over to Controllers/HomeController.cshtml

  2. Replace the main Index method with the following code. Instead of pointing to a cshtml view, the method will just go grab the contents of our base Angular html view.
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return new FilePathResult("/dist/index.html", "text/html");
        }
    }
  3. Last but not least, because we want to run our app using MVC, we need to tell Angular to go pack up all of our files and dump them into a dist folder. Go ahead and paste the following into your package.json, under "scripts". This will allow you to run "npm run [script_name]" within your command prompt.
      "build": "ng build --deploy /dist/"
    This will build your Angular app, and dump the output into a /dist/ folder for you.

  4. Run "npm run build" in your command prompt. Optionally, add a second command called "watch" that is the same as the first command, but adds a --watch flag at the end, telling the CLI to watch for any JS changes, and re-compile whenever any files are saved.

Congratulations! You can now run your app using Visual Studio.

Your Angular app is set up to run on .NET MVC. Optionally, remove any unnecessary folders and files that aren't being used before you start developing your new app.

As always, feel free to contact me at Abarn279@gmail.com with any questions.