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.

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:

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.