Get Started with Angular 2 and ASP.NET Core in Visual Studio Code

Published Apr 9, 2017 • Updated Apr 18, 2017

Getting off the ground with Angular 2 and ASP.NET Core right now can be a little intimidating. There's multiple ways to combine these two powerful frameworks to make something awesome. The goal of today's post is to clear up some of the confusion by showing you a sane, cross-platform approach to getting an Angular 2/ASP.NET Core app started using Visual Studio Code, .NET Core CLI and angular-cli.

---

Dev environment

I'm using Windows 10 with the latest versions of:

• Visual Studio Code - v1.11.1
• .NET Core SDK v1.0.1 dotnet --version
• node v6.10.0 node -v
• npm v3.10.10 npm -v

Finally, I had to install the C# for Visual Studio Code extension.

Angular CLI

Angular 2 comes with an awesome new tool in angular-cli that can create your project, add files, and perform a number of other development tasks such as testing, bundling, and deployment. It is the new swiss army knife of angular development.

To get started make sure you're running Node 6.9.0 or higher and NPM 3 or higher. From a command prompt install it using npm.

npm install -g @angular/cli

Next, we'll create a new project using ng new. This command creates a new folder for the project using our app name DotNetGigs. The --style argument tells the generator we want the app to pre-compile our css using sass with scss syntax. The documentation contains all the commands and switches available for working with angular-cli. I highly recommend you check it out.

ng new DotNetGigs --style=scss

After the generator creates the app you can open it from the command line by launching Visual Studio Code directly from the project folder.

cd dotnetgigs
code .

Adding Bootstrap

The app template generated by the CLI has no styling so I'd like to jazz things up a bit with bootstrap. Back at the command prompt I use npm to install Bootstrap 4 alpha in the app directory:

npm install bootstrap@next --save

Then I modified the .angular.cli.json file to add the required script files to the scripts array.

"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/tether/dist/js/tether.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],

Finally, I added the bootstrap css to the styles array.

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.css",
  "styles.scss"
],

A new component

I want to build out the layout of the UI a bit by adding a new component. Using the CLI I generate a new header component within the app folder.

cd src/app
ng generate component header

The command created a new folder and associated files for the html, css, test and class code. It also updated our app.module so other components will be aware of it. Notice the same naming convention is used as in the rest of the app. Using the CLI provides a consistent and modular approach to extending our application following baked-in best practices and patterns. This is one of its biggest benefits.

Next I'll add the bootstrap navbar markup to the header.component.html file.

<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">dotnetGigs</a>
  <div class="collapse navbar-collapse" id="navbarCollapse">
  <ul class="navbar-nav mr-auto">
  <li class="nav-item active">
  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item">
  <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
  <a class="nav-link disabled" href="#">Disabled</a>
  </li>
  </ul>
  <form class="form-inline mt-2 mt-md-0">
  <input class="form-control mr-sm-2" type="text" placeholder="Search">
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
  </div>
  </nav>

And finally, add the new header component to the main app.component.html template.

<!-- app.component.html -->
<app-header></app-header>

<!-- container -->
<div class="container-fluid">
	<!-- Begin page content -->
	<p>Content here!</p>
</div>
<!-- /container -->

With everything in place, I'm ready to smoke test my app to see how things look. Back on the command line I issue a simple ng serve to build and fire up the app on the node dev server @ http://localhost:4200

Voila our angular app with bootstrap navbar is working!

---

ASP.NET Core backend

Time to build our backend. To get started in the root project folder I ran the dotnet CLI command to generate a new, empty ASP.NET Core application.

dotnet new web

This command generates a few files necessary to get a bare-minimum ASP.NET Core server on its feet: Program.cs, Startup.cs and dotnetGigs.csproj.

Note: when opening one of *.cs files for the first time in Visual Studio Code you'll be prompted to restore packages required by the project so be sure to accept those requests.

Now we need to use the CLI to add static file support to serve the index.htm, css, images and javascript files required by our SPA.

dotnet add package microsoft.aspnetcore.staticfiles

After executing this, you'll likely see another "unresolved dependencies" message in Visual Studio Code. Simply choose to restore the package.

With the package added, we just need a small change in Startup.cs to add static file support in the middleware.

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
  loggerFactory.AddConsole();

  if (env.IsDevelopment())
  {
  app.UseDeveloperExceptionPage();
  }

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

Trigger the Angular build from ASP.NET Core

Add a build step in the .csproj file to run the angular-cli build command after our ASP.NET Core project builds.

<Target Name="AngularBuild" AfterTargets="Build">
  <Exec Command="npm run build" />
</Target>

Serve the Angular app from ASP.NET Core

Finally, we need to let Angular know that its build output should go to the wwwroot folder of our server. In the .angular.cli.json file simply change the "outDir" to "wwwroot":

{
      "root": "src",
      "outDir": "wwwroot",
      "assets": [
      ...

Run it!

Hit F5 in Visual Studio Code to launch the debugger. Your Angular app should now be hosted by ASP.NET Core and running on port 5000 instead of 4200 which is the angular-cli default - sweet!

Wrapping up

Properly integrating Angular client-side code with server-side code can be complicated and time-consuming. But by using the new CLI tools with just a few simple config changes we're able to very quickly create a solid foundation for an Angular 2/ASP.NET Core solution managed entirely by Visual Studio Code.

If you have a question or are building something cool using this approach please let me know in the comments below.

Thanks for reading!

Source code