Following on from my blog post https://www.darenmay.com/blog/angular-cli-support-in-vs-2017/ I decided to take a look at what it would take to update the original sample (you can find a copy of that here). The result of the migration is located https://github.com/darenm/custommayd-bank

As the project layout is quite different, I started by creating a new project using the latest template as documented on the Microsoft Docs site: Use the Angular project template with ASP.NET Core.

Overall, the new solution is much more streamlined – unlike the old solution, there are no MVC views necessary to get things started – the Angular app runs from Index.html as you would expect. The folder structure of the ClientApp has changed slightly, but this results in fully supporting Angular CLI (also configured via a custom .angular-cli.json). Once the solution was created, t was really just a case of deleting the “sample” code from new application and adding in the files from the original solution. I used the ng command to generate the stubs for all my components, services, pipes and classes and then just copied over the code. There were only two things I changed (the app ran “as-is” but I wanted to move off of deprecated items), the account.service and references to the currency pipe.

Account Service Changes

In the original code, ‘account-service.ts’ looked like this:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/Rx';

import { AccountSummary } from './account-summary.type';
import { AccountDetail } from './account-detail.type';
import { AccountType } from './account-type.enum';

@Injectable()
export class AccountService {
    constructor(private http: Http) {

    }

    getAccountSummaries() {
        return this.http.get('api/Bank/GetAccountSummaries')
            .map(response => response.json() as AccountSummary[])
            .toPromise();
    }

    getAccountDetail(id: string) {
        return this.http.get(`api/Bank/GetAccountDetail/${id}`) // note string interpolation
            .map(response => response.json() as AccountDetail)
            .toPromise();
    }
}

The code is using Http from @angular/http which has been deprecated, so I updated the code to use HttpClient – one of the nice things about HttpClient is it handles json better and makes it easier to return strongly-type results:

import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import 'rxjs/Rx';

import { AccountSummary } from './account-summary';
import { AccountDetail } from './account-detail';


@Injectable()
export class AccountService {

  constructor(private http: HttpClient) {

  }

  getAccountSummaries() {
    return this.http.get<AccountSummary[]>('api/Bank/GetAccountSummaries')
      .toPromise();
  }

  getAccountDetail(id: string) {
    return this.http.get<AccountDetail>(`api/Bank/GetAccountDetail/${id}`) // note string interpolation
      .toPromise();
  }
}

As you can probably see, the HttpClient.Get allows the return type to be specified using this.http.get<AccountSummary[]>('api/Bank/GetAccountSummaries') etc. which means we no longer need the map operator.

Currency Pipe Changes

This was a subtle change but a warning indicated the parameters to the currency pipe had changed in Angular v5. Instead of:

<h3>{{ account.balance | currency:"USD":true:"1.2-2" }}</h3>

It is now:

<h3>{{ account.balance | currency:"USD":"symbol":"1.2-2" }}</h3>

Note that the true parameter has changed to “symbol” providing more flexibility on what is displayed for the currency type (options are now “code” which would display “USD”, “symbol” which would show “$” and “symbol-narrow” which for some currencies shows a narrower symbol, but for USD, still shows “$”).

Wrap Up

Overall, the migration was a low-friction exercise and the simplification of the solution together with the Angular CLI support makes it worthwhile embracing the new template.

Back in March of 2017, I was invited to participate in the Visual Studio 2017 launch by delivering a live 1 hour session on Building web apps powered by Angular 2.x using Visual Studio 2017 - you can tell marketing came up with the title!

BuildingWebApps

It was a fun opportunity and gave me a chance to talk about something other than UWP. However, at the time, I felt that the biggest drawback with the integration of Angular and Visual Studio 2017 (and VS Code) was the fact that the project created by the template was incompatible with Angular CLI. If you are unfamiliar with Angular CLI – it is a powerful tool that makes it easy to create an Angular application and add components to it as you go. It obviates the need to manual create boilerplate code and ensures that components are “registered” with modules, etc.

Well – good news! The latest versions of the angular template now fully support Angular CLI! You can check out the updated documentation here https://docs.microsoft.com/en-us/aspnet/core/spa/angular?tabs=visual-studio. In a nutshell, the project template allows you to create a single project that contains an Angular client-side application and an ASP.NET Core Web API backend. This allows you to build and deploy both aspects as a single unit so now you get the incredible productivity of Visual Studio 2017 and Angular CLI. Maybe I will update my sample at some point…

For a trip down memory lane, you can check out the outdated video from the Visual Studio 2017 launch below: