Hello, fellow coders, Recently I have upgraded one of my Angular 2 web application to angular 4 and it was a cinch to upgrade. This doesn’t require any coding changes, We can do it using npm command.

In this article, I’m going to brief you about AngularJS 4 and explain you the step by step procedure of upgrading your Angular 2 web application to Angular 4.

What is AngularJS?

AngularJS is a structural JavaScript framework to build dynamic web applications. It uses HTML as a template and lets you extend HTML’s syntax to express application’s components clearly. It’s data binding and dependency injection reduces the coding. It is very useful to build single phase applications. Read more about AngularJS

What is new in AngularJS 4?

Below I have explained some of the major improved on AngularJS 4.

1. It is Smaller than Angular 2

 

AngularJS 4 has minimized the AOT (ahead-of-time) generated code. This change reduces 60% code generation for your components. The more complex your templates are, the higher the savings.

 

2. It is faster than Angular 2

 

AngularJS 4 has enhanced the code compiling speed.

 

3. It has enhanced *ngFor and *ngIf

 

It has newly added if/else style syntax to *ngIf so if you are making asynchronous calls to a Firebase database, you can add a loading screen on the page itself while data load. Find and example below.

<div *ngIf="userData | asyncData as users; else loading">
 <user-profile *ngFor="let user of users; count as count" [user]="user">
 </user-profile>
<div>{{count}} total users</div>
</div>
<ng-template #loading>Loading data...</ng-template>

 

4. It has the recent version of TypeScript.

 

AngularJS 4 has updated to latest version of TypeScript 2.4. It will improve ngc speed.

 

5. AngularJS 4 has introduced a new title case pipe it used to change the first letter of each as capital.

 

6. AngularJS 4 has simplified the adding search parameter in HTTP request.

http.get(`${baseUrl}/api/users`, { params: { sort: 'ascending' } });

 

Previously, you had to do:

const params= new URLSearchParams();
params.append('sort', 'ascending');
http.get(`${baseUrl}/api/users`, { search: params });

 
 

7. AngularJS 4 has new added new service to handle meta tags.

@Component({
 selector: 'ponyracer-app',
 template: `<h1>PonyRacer</h1>`
})
export class PonyRacerAppComponent {
 constructor(meta: Meta) {
   meta.addTag({ name: 'author', content: 'Ninja Squad' });
 }
}

 

8. AngularJS 4 has added one more new validator called compareWith to compare the option on <select>.

<select [compareWith]="byId" [(ngModel)]="selectedPeople">
  <option *ngFor="let people of country.peoples" [ngValue]="people">{{people.name}}</option>
</select>
byId(p1: PeopleModel, p2: PeopleModel) {
  return p1.id === p2.id;
}

 
 

9. AngularJS 4 has introduced new interface called paramMap or queryParamMap. It will represent the parameters of a URL, In old version, it has params or queryParams.

const id = this.route.snapshot.paramMap.get(‘UserId’);
this.userService.get(id).subscribe(user => this.user = user);

 

10. Internationalization I18n improvement. AngularJS 4 has small improvement on ngPlural. Now its ngPluralCase=”0″ from ngPluralCase=”=0″.

 

Upgrading from AngularJS 2 to AngularJS 4?

Now that we have finished discussing what is AngularJS and what is new in AngularJS 4. Now let’s get into the action of upgrading AngularJS 2 to AngularJS 4. It is very simple to upgrade, and as said before we don’t need to do any coding changes. We easily do it using npm command.

1. Simply run the below command:

On Linux

npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest –save

On Windows

npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest –save

This command will automatically update the package.json and will update angular js components.

2. Or we can manually update package.json and update using same npm command.

Angular 2.4.9 : package.json

{
   "name": "angular2-registration-login-example",
   "version": "1.0.0",
   "repository": {
       "type": "git",
       "url": "https://github.com/cornflourblue/angular2-registration-login-example.git"
   },
   "scripts": {
       "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
       "lite": "lite-server",
       "tsc": "tsc",
       "tsc:w": "tsc -w"
   },
   "license": "MIT",
   "dependencies": {
       "@angular/common": "~2.4.0",
       "@angular/compiler": "~2.4.0",
       "@angular/core": "~2.4.0",
       "@angular/forms": "~2.4.0",
       "@angular/http": "~2.4.0",
       "@angular/platform-browser": "~2.4.0",
       "@angular/platform-browser-dynamic": "~2.4.0",
       "@angular/router": "~3.4.0",
       "@angular/upgrade": "~2.4.0",
       "core-js": "^2.4.1",
       "rxjs": "5.0.1",
       "systemjs": "0.19.40",
       "zone.js": "^0.7.4"
   },
   "devDependencies": {
       "concurrently": "^3.1.0",
       "lite-server": "^2.2.2",
       "typescript": "^2.0.10",
       "@types/core-js": "0.9.36",
       "@types/node": "^6.0.46",
       "@types/jasmine": "^2.5.36"
   }
}

 

Angular 4.1.0 : package.json

{
   "name": "angular2-registration-login-example",
   "version": "1.0.0",
   "repository": {
       "type": "git",
       "url": "https://github.com/cornflourblue/angular2-registration-login-example.git"
   },
   "scripts": {
       "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
       "lite": "lite-server",
       "tsc": "tsc",
       "tsc:w": "tsc -w"
   },
   "license": "MIT",
   "dependencies": {
       "@angular/common": "^4.0.0",
       "@angular/compiler": "^4.0.0",
       "@angular/core": "^4.0.0",
       "@angular/forms": "^4.0.0",
       "@angular/http": "^4.0.0",
       "@angular/platform-browser": "^4.0.0",
       "@angular/platform-browser-dynamic": "^4.0.0",
       "@angular/router": "^4.0.0",
       "core-js": "^2.4.1",
       "rxjs": "^5.2.0",
       "systemjs": "^0.19.47",
       "zone.js": "^0.8.5"
   },
   "devDependencies": {
       "@types/node": "^6.0.60",
       "concurrently": "^3.1.0",
       "lite-server": "^2.3.0",
       "typescript": "^2.2.2"
   }
}

 

Then just run npm update

Angular has built an “interactive Angular Update Guide“. If you are messing up something wrong around, please check all the options, the installation process is super easy!

That’s it! It is that simple, now you are running AngularJS 4. Here we have discussed the new features and improvements in Angular 4 and upgrading web apps from Angular 2 to Angular 4. If you have any trouble in upgrading, comment below. Happy coding…

If you are looking for angular developers for your project ? Hire Angular developer from Agira Technologies to build best web-apps at affordable rates. Our dedicated Angular developers are well-versed with all the updates and ensure top-notch web applications development to meet your business requirements. For any queries reach us via info@agiratech.com