Migration From AngularJS (1.x) To Angular (2+)

Overview

AngularJS has been one of the great JavaScript frameworks over the past few years and we have used this to build few really cool solutions. While we stay excited about the capabilities that AngularJS provides to us, what is interesting to see is that few customers have started seeing value in migrating their Apps to the latest version of Angular.  However, there is a significant difference in AngularJS and Angular and it makes it difficult to migrate if you don’t plan and execute efficiently.

In this article, we will write about how to migrate AngularJS application to Angular.

Pre-Requisites

  • Node.js (5+) – the article assumes that you have a working setup of Node.js
  • Angular CLI

Getting Ready

Step 1: Installing Node JS.

Please refer to this link to download and install Node.js

Step 2: Installing Angular CLI.

Please refer to this link to install Angular CLI

Running AngularJS app

This tutorial assumes that you are comfortable with developing AngularJS apps.

Download our gulp generated ng1(AngularJS) app from GitHub which includes the following features –

  • Directive
  • Filter
  • Service
  • Controller
  • Dependency injection
  • Routing
  • Unit testing
  • CSS
  • Gulp build

Read the Readme.md file to set up and run AngularJS app. After running the app, you will see the following output:

Generating Angular App

We will use Angular CLI to generate Angular app. This app would be identical to ng1(AngularJS) app.

Step 1: Run the following command to generate  Angular app –

Step 2: Go to angular-migration folder and run the following command from terminal to start the application –

Step 3: Navigate to http://localhost:4200/ to see the initial output.

Now we have a working starter project in place for migration. Let’s restructure it to make it identical to ng1 app.

Including  Third-Party Libraries

There are two ways of including the third-party library of JavaScript and CSS.

  • Include JavaScript and CSS file in index.html.
  • Add a reference to the .angular-cli.json app  scripts/css.

Setting Up Root and Bootstrap Component

In the AngularJS app, ng-app is at the <html> element level. It provides control over the <head> and allows us to dynamically update the <title> with a custom metadata. In Angular, our root component is located inside the <body>.

<app-root>  is an Angular component selector, you can find it under src/app folder.

We can change the bootstrap component at src/app/module.app.ts

Adding Router Module And Routes

Router module and router, enable users to navigate from one page/view to the next view as users perform different tasks in the application.

Do the following steps:

Step 1: Create app.routing.ts file under src/app folder.
Step 2: Add the following code to set the routes for different components

You can import different components and set the routes.

Step 3: Add the following code to app.module.ts to include router module in application

and add AppRoutingModule module into imports.

This will make AppRouting module available through the application.

Transclusion of AngularJS Components into Angular

Let’s generate AngularJS app component in Angular. We can use the Angular CLI commands to generate new components for our app.

Create pages folder under src/app and do the following steps:

Step 1:  Generate header component.

 

The previous command has generated the header component and included it in the app module.

Now we can find following files under header folder –

  • header.component.css – CSS file to add styles related to the header.
  • header.component.html – Html file to add markup code related to the header.
  • header.component.spec.ts – TypeScript file to add unit testing code related to the header.
  • header.component.ts – TypeScript file to add TypeScript code related to header
Step 2: Add the following html code to header.component.html
Step 3: Add following CSS code to header.component.css

Step 4: Add the following code to header.component.ts

we can see the @Component selector is app-header. We generally want custom elements to be hyphenated as per the W3C spec for custom elements.

Similarly, we can generate the other components and the markup/CSS and typescript code.

Step 5:  Generate footer component.

Step 6:  Generate content component.

Transclusion of AngularJS Service to Angular Service

Let’s generate service in Angular to load the employee list in content component. Do the following steps:

Step 1: Generate employee service.

You can find employee.service.spec.ts and employee.service.ts under app service folder.

Step 2: Inject employee service in app module to use it.

Step 3: Add method to load the employee list from the JSON file.

Step 4: Inject employee service into the content component and call employee service method getEmployeeData to load employee list.

Angular Component Interaction

Let’s Include header/footer in content component and bind employee list and allow to communicate with content and root component.

Transclusion of AngularJS Filter to Angular Pipe

Let’s create the pipe to filter employee list.

Step 1: Generate SearchPipe

Step 2: Inject SearchPipe and add into declarations in app module.

Step 3: Use Search Pipe in content.html to filter employee list.

Modifying App Component and Routing Module

Let’s modify app routing module and app component to demonstrate the routing for other components in the application. Do the following :

Step 1: Generate a login component.

Step 2: Add routes for default URL and Login page.

Step 3: Add router outlet in app component.

Router outlet is a placeholder that Angular dynamically fills based on the current router state.

Step 4: Run the application and change routing to /login in URL and you will see the login page.

We are done with migrating the app from AngularJS to Angular.

Run the “ng serve” command and open “http://localhost:4200/” in the browser to see the migrated output.

Unit Testing

Angular CLI generates .spec.ts file for your Component/Service and Pipes. Also, it add basic unit testing code (you can also do it manually). Open app.component.spec.ts and you will see the following unit testing code –

You can keep adding your unit testing code on top of it. Angular internally use Karma for unit testing. Run the following command to execute your test cases –

Above command launch the browser with unit test case report where you can see success and Failures list.

Building App

Run the following command to build the application –

The build artifacts will be stored in the dist folder. Use the -prod flag for a production build.

A Look at the migrated app

In this article, so far you have seen how to create an Angular (2+) app and how to map the existing features, from the AngularJS, in the Angular app.

After migration, you shall have following directory structure

After launching the app, you shall be able to see the following screen, which looks pretty close to what we had in AngularJS:

How to get the demo app?

You can download ng1 and ng2 demo application source code from GitHub.

Summary

In this article, we have successfully migrated an AngularJS app to Angular. The migration included taking care of Component, Routing, Service, Pipe, build, etc.. I hope this article guides you in planning the migration of your old app to the latest version of Angular.

WalkingTree offers Migration Services to help you with the end-to-end migration of your existing application to Angular(+Ionic). Feel free to contact us with your migration need and our professional services team would be just a click away.

References

Related Posts

Leave a comment

Translate »
Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.