Migrating Angularjs to Angular 4,5 (With Demo)

Migrating AngularJS to Angular 4,5 (with DEMO)

Incrementally upgrade an AngularJS application to Angular.

One of the keys to a successful upgrade is to do it incrementally, by running the two frameworks side by side in the same application, and porting AngularJS components to Angular one by one. This makes it possible to upgrade even large and complex applications without disrupting other business, because the work can be done collaboratively and spread over a period of time. The upgrade module in Angular has been designed to make incremental upgrading seamless.

For more information, see Angular Developer Guide - Upgrading from AngularJS

The DEMO on PLNKR

migrating AngularJS to Angular 5

You declare variable inside class with proper type so that error can be found at time of compilation, after declaration you can use that variable inside the class using this keyword.

card.component.ts

import { Component, OnInit } from '@angular/core';
import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';

@Component({
  selector: 'card-demo',
  templateUrl: './card.component.html'
})
export class CardDemoComponent implements OnInit {

  location: string;

  constructor() { }

  ngOnInit() {
   this.location = 'http://www.google.com'
  }
}

card.component.html

<h2>Card Component</h2>
<rt-card testId="test-card">
    <rt-card-title>Lorem ipsum dolor sit amet</rt-card-title>
    <rt-card-content>Lorem ipsum dolor sit amet</rt-card-content>
    <rt-card-footer><a href="{{location}}" class="rt-active-link">Lorem ipsum dolor sit amet</a></rt-card-footer>
</rt-card>

How to upgrade from angular 1.4 to angular 5?

There is official upgrade guide:
https://angular.io/guide/upgrade or https://angular.io/guide/upgrade-performance

But as a person who have written a big AngularJS application and now is working on a big Angular project, I recommend to start a new fresh project and step-by-step write a complete new application in the newest Angular. By my experience, switching between both frameworks is really hard and time-consuming.

In Angular things work totally different (better) and the framework itself offers much more than AngularJS.

If you still want to go the upgrade way, do it in 2 steps:

• Upgrade to 1.5 (because there must be a reason why it is required)
• Upgrade to Angular

creating hybrid application using angular js and angular 5

It is possible have hybrid application and to migrate AngularJS to Angular 4+, step by step.

There are so many links available which can help you with this.

Here are the some of the links to get you started:

1. To understand basic hybrid app -> https://github.com/basavarajnb/NgUpgrade-Angular-CLI

2. Official Angular Migration -> https://angular.io/guide/upgrade

3. Tutorial 1 -> https://vsavkin.com/migrating-angular-1-applications-to-angular-2-in-5-simple-steps-40621800a25b

Tutorial 2 -> https://yakovfain.com/2017/08/01/migrating-your-apps-from-angularjs-to-angular/

4. 9 Lessons Learned on an AngularJS to Angular 4 Upgrade https://www.intertech.com/Blog/9-lessons-learned-on-an-angularjs-to-angular-4-upgrade/

All the best

---

Related Topics