Few weeks ago I have posted a tutorial on how to build an Angular2 application with ASP.NET Core API. Today, I would like to show you another way to accomplish that - by using Angular2 CLI, which has built in support for building and bundling Angular2 applications.

1. Angular2 CLI
2. Creating an application
   1. Backend project
   2. Configure MVC
   3. Frontend project
   4. Proxy to the API
   5. Build config
3. Working with your application
   1. Development
   2. Building for deployment
4. Summary

Angular2 CLI

I have blogged about it last week, but in short, it is a command line tool to help you work with Angular2 applications:

• initialize a new app
• generate code for new components, services etc.
• serve locally during development
• build for deployment

Using it is much simpler, than configuring the application manually. If you are starting a new app, I strongly recommend using it.

Creating an application

I will now walk you through the process of creating an app using Visual Studio 2015. The whole code is available on GitHub. Thanks to the input from Paweł Sołtysiak, the project is also compatible with VS Code.

Backend project

Open Visual Studio and create a new ASP.NET Core project called Backend in the new solution. Name the solution with your project name.

Configure MVC

Because we have created an empty project, we need to configure MVC and add support for static files. For that, you need to add these two packages to project.json file:

"Microsoft.AspNetCore.Mvc": "1.0.1",
"Microsoft.AspNetCore.StaticFiles": "1.0.0",

When that’s done, you can modify the Startup class:

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc();
    }

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

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

        app.Use(async (context, next) =>
        {
            await next();

            if (context.Response.StatusCode == 404 &&
                !Path.HasExtension(context.Request.Path.Value) &&
                !context.Request.Path.Value.StartsWith("/api/"))
            {
                context.Request.Path = "/index.html";
                await next();
            }
        });

        app.UseMvc();
        app.UseStaticFiles();
    }
}

Frontend project

Next, add a new Class Library project in this solution.

I have used the Class Library so that the frontend part is visible in the Visual Studio.

Now, open a command prompt. If you haven’t done that already, install Angular CLI with npm install -g angular-cli. Next, cd to the Frontend directory and run ng init --name ProjectName. This step will take a while. Ng will bootstrap your angular application and download all npm packages that you need.

Proxy to the API

Because you will use TypeScript to write the frontend part, you can’t just serve these files to the browser. In the previous tutorial, I have used gulp to process all the files. Here, we will use ng command for it. The ng serve command is building the app, serves it on 4200 port and watches for changes you make in your code. When it detects modified file, it rebuilds the app and sends an event to the browser so it refreshes the window. This is great, but we also need to call our ASP API somehow. This is where the proxy configuration comes in. You need to create a file called proxy.conf.json in the Frontend directory:

{
  "/api": {
    "target": "http://localhost:65498",
    "secure": false
  }
}

The target value contains a port number. If you’re using Visual Studio, you can read it from Backend project properties.

This will pass all the API requests to the running ASP.NET Core application.

The last thing we need to do here is to modify npm start script, so it uses the proxy configuration. Open package.json in the Frontend project, find the scripts section and modify start command to:

"start": "ng serve --proxy-config proxy.conf.json"

Build config

I mentioned above, we will use the cli to build the angular app. The CLI tool, by default, creates the files in the dist directory. We will change it to wwwroot in our backend app. For that, open angular-cli.json file and edit outDir property:

"outDir": "../Backend/wwwroot"

Working with your application

Now, when everything is set up, there are few things to remember.

Development

To work on the app, you need to start both, ng dev server and ASP.NET application. The first one is started with the command npm start executed from the Frontend directory. Backend app can be started from the Visual Studio or also command line with dotnet watch run. If you use the command line version, be careful about the port it uses and set it up properly in the proxy config file. The watch command in dotnet watches for changes in the application and rebuilds it whenever you change something.

You can also use ng tool to generate the angular2 files for you. Here are some useful commands. You can find all the details in the documentation

• ng g component my-new-component
• ng g directive my-new-directive
• ng g pipe my-new-pipe
• ng g service my-new-service
• ng g module my-module

The route command has been temporarily disabled due to the changes in the router, but it’s probably coming back soon.

Building for deployment

To deploy the app, you need to first build the angular2 app with ng build command. It will transpile and bundle all needed files and copy everything, including static files, to wwwroot folder of the backend application. When it’s done, you can use Publish option in Visual Studio to generate the whole package.

Summary

As you see, the process described here is very straight forward. In these few steps, what you get is an application, which is very easy to maintain and deploy. You can do it all manually, or clone my seed repository, rename the project and start working on your application.