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.

Comments


Comments are closed