Michael D. Green

Blogger, Consultant, Technologist and Very Opinionated.

Upgrading My Angular 4 Application to Angular 5

21 May 2018 » technology

Blogs - Michaeldeongreen

I just wanted to write a very short blog entry on the steps I took to upgrade my blog from Angular 4 to Angular 5.

Package Updates

The very first steps I took were to create a new branch in GitHub and also, I used a Virtual Machine to perform the upgrade before performing all the steps on my main PC.

  • I upgraded Node.js and Node Package Manager (npm) to the latest version
  • I used npm to upgrade angular-cli to the latest version
  • I used npm to upgrade Typescript to the latest version
  • I downloaded and installed the latest Typescript SDK for Visual Studio 2017
  • I configured Visual Studio 2017 to use the latest version of Typescript by selecting the Class Library project where the Angular files reside, right-clicking and selecting properties and navigating to the TypeScript Build tab:

Blogs - Michaeldeongreen* I used https://update.angular.io/ to help me identify which node modules needed to be upgraded, the exact versions and generate the npm commands. Note: Make sure to delete the node_modules folder before running the npm install command

  • I then used the command ng update @angular/cli to create the new angular.json configuration file
  • I had to replace the now deprecated http service with the new httpclient. I will talk about this in more detail later but here is a great blog I read to help me convert the http service to the new http client.


.angular-cli.json - This file has been deprecated and a new file called angular.json is now used.

http service - The http service has been deprecated in place of the new HttpClient.

Server Side:

    public PagedResponse Get(string criteria, int pageNumber)
     return _pagingService.Search(new PagedCriteria() { PageNumber = pageNumber, PageSize = _pageSize, Posts = BlogContextManager.PostSummaries, SearchCriteria = criteria, IsActive = true });

Using the http service:

    import { Http, Response, Headers, RequestOptions } from '@angular/http';
    import { Observable } from 'rxjs/Rx';
    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/catch';
        constructor(private http: Http) {
        public getSearchResults(page: Number, criteria: string): any {
            let url = `${this.baseUrl}/search/${encodeURIComponent(criteria)}/page/${page}`;
            return this.http.get(url)
                .map((response: Response) => response.json())
                .catch((error: any) => Observable.throw(error.json().error) || 'Server Error');

Using the new http client:

    import { HttpClient } from '@angular/common/http';
    import { IPagedResponse } from './ipaged-response.pagedresponse';
        constructor(private http: HttpClient) {
        public getSearchResults(page: Number, criteria: string): any {
            let url = `${this.baseUrl}/search/${encodeURIComponent(criteria)}/page/${page}`;

That’s pretty much it. In a few days, I will probably upgrade from Angular 5 to Angular 6.