While some of us are pondering how to run the Angular app, others have already created an application using a different framework, and now they're puzzled over the proper solution for the migration problem (say, from AngularJS to Angular). The problem really deserves attention, and we're ready to help in this respect.
We're going to tell you about our experience regarding migrating to Angular and describe what difficulties you may encounter (and how to bypass possible obstacles). In addition, we’ll explain to you when and why there is a need to migrate AngularJS to the Angular module and what methods allow to achieve the desired goal.
And if after reading the article you still have any questions, feel free to ask them!
Application Development Frameworks
AngularJS and Angular are web frameworks, tools that facilitate the process of starting a web application. It means you don't need to write a bunch of code lines on your own and spend time finding errors and bugs. The one who created the framework has already done the lion’s share of your work.
In the past, mobile and web applications had to be written “by hand”, and only the developer could modify or deploy them. Various frameworks allowed solving these problems at least partially: now everything related to changing the app structure, put in order by forming a common approach to a web development process. Moreover, depending on the task, you’re free to choose one framework covering all your needs or combine several of them.
However, it’s hardly possible to make a choice for keeps. In the end, time moves along, increasingly innovative technologies are emerging, and sometimes old ones become irrelevant. And that's when you need a solution to migration.
But before moving on to the main topic (how to migrate your application), we should take a look at the basics and explain why the idea to create an Angular app is good. What is an Angular module in Angularjs, and what is the difference between these frameworks? So many questions, let's try to answer them!
AngularJS vs. Angular framework
AngularJS was first introduced in 2009 and over the years has gathered an active community of developers around itself. And to date, a great number of its versions have already been released.
Alas, the take-off period is over, and now the framework is declining. Today few developers are interested in how to import AngularJS, the framework is almost a has-been, so to say. What can you do, it is the fate of many technologies (especially when it comes to the IT industry).
Though, we don’t want to be unfounded and would be happy to confirm our words with statistical data:
The success of AngularJS was largely influenced by its creator, Google, a company with enough resources to create a comprehensive framework and popularize it among developers.
In the standard package, AngularJS provides various tools needed to build CRUD apps and conduct modular, end-to-end, and mock testing, as well as a typical application template. In addition, AngularJS has a rather low barrier to entry compared to alternative solutions. These undoubted advantages led to the formation of a fairly large developer community and generated a huge number of projects written in AngularJS.
So for a long time, AngularJS code structure had been proving its effectiveness, but now more and more developers prefer to create and run apps using the Angular module... what is the reason? Where did this new Angular module come from in the first place?
Initially, Angular was positioned as the next version of AngularJS, but actually, it is a completely different (and more efficient!) framework. And the emergence of such a strong opponent finally diminished the position of AngularJS.
Still further, since July 1, 2018, the development of AngularJS stopped, and the framework went into LTS mode for 3 years. In this regard, the issue of transferring legacy AngularJS projects and upgrading to Angular has become quite relevant.
Why do you need a solution to migrate from Angularjs to Angular?
There are a lot of reasons explaining why Angular mobile apps are so good and easy to make, which means why the solution to the migration problem is needed, but we'll single out only a few of them:
-
Ease of use. Angular is faster, easier, more convenient than AngularJS. A number of problems inherent in AngularJS have been successfully solved (in particular, typification of Angular app samples helps with some of them).
-
Technology updates, which ensures stable project progress. Migrating to Angular will still be necessary anyway, but the sooner this is done, the cheaper and more efficient such a migration would be.
-
The lack of AngularJS development. AngularJS is a closed chapter, in a manner of speaking; it performs its tasks but there is no hope of future technology upgrades. And developers are always interested in new solutions and have no desire to deal with an obsolete framework.
So, as you see, Angular is great for creating both basic single-page apps, and large online portals, it’s a reliable solution to develop web applications of various levels of complexity. But what to do if your resource is built using AngularJS files? Of course, migrate AngularJS to Angular!
What migration options you can choose
So, let's say you've been impressed by the above Angular module examples proving the framework's efficiency. What to do next?
In fact, there are only 2 options to migrate from AngularJS to Angular.
#1. Angular app development from scratch
Essentially, you need to build an Angular app from scratch. Of course, the appeal of such an approach is quite understandable: in any project there comes a time when you want to rewrite everything anew, and migrating to Angular is a wonderful opportunity to do just that. All you need is to follow the patterns, throw out the unused AngularJS code, and then “flick a switch”.
However, as a rule, a business cannot afford the considerable downtime required to start all over. Even if you try to perform several tasks at the same time, constantly adding new features, the whole venture risks not justifying the effort invested. So this isn't the best solution to migration.
#2. Hybrid mode
The AngularJS/Angular-hybrid module allows you to run and maintain the simultaneous operation of two frameworks in one project. Newly developed features are being implemented within the new framework, and the old ones are being transferred gradually, without affecting the performance of the project as a whole.
A project would safely remain in a hybrid state during the period needed to migrate AngularJS to Angular, even if it's going to be a long-continued run. There is no hurry. Take your time to find solutions for possible migration problems (say, if you've faced a difficulty associated with transferring some AngularJS components). Or maybe you’re now fully focused on expanding the functionality and cannot be distracted by other issues. Don’t worry! The project to upgrade to the Angular app’s level will cope with any delay of the sort.
When we needed to upgrade our project, we chose the second option described above. And now we're ready to share our experience with you and describe the main steps for migrating to Angular using a hybrid mode.
A full guide to upgrading from AngularJS to Angular
In our case, we are talking about a project created on AngularJS 1.3 and subsequently upgraded to AngularJS 1.6, i.e. part of the components was written as directives.
Initially, the project structure was developed using the Yeoman Hottower generator from John Papa. Most of the packages were in bower, and the Gulp task manager was responsible for the build.
Initialization
Many articles say that before you start migrating to Angular, you need to transfer the build of the AngularJS application to Webpack. Such a task is quite time-consuming and able to significantly stall the work.
In fact, you can initialize a hybrid app in no time. After all, you have a great tool angular-cli and a well-thought build of the Angular project.
So…
-
Create a new project on Angular (ng new <project name>) and copy the project's AngularJS files to the app folder.
-
Styles and js files of the old project should be connected to the corresponding styles and scripts groups from angular.json. The builder will automatically connect them to the project.
-
Initialize a hybrid launch. To work in a hybrid mode, you’ll need the ngUpgrade toolkit, which allows you to conveniently configure the simultaneous operation of two frameworks and the seamless transfer of all components. You can delete the ng-app directive - you won't need it anymore. And initialize the application launch in the main module:
import {UpgradeModule} from '@angular/upgrade/static';
...
export class AppModule {
constructor(private upgrade: UpgradeModule) {}
ngDoBootstrap() {
this.upgrade.bootstrap(document.documentElement, ['app']);
}
}
That's it, your application is ready to run (so now you know how to start an Angular app, at least, a hybrid one).
As you transfer your application components from AngularJS to Angular, you should remove them from angular.json and connect to, say, main.ts using the standard Require syntax. The next step is to rename js to ts. And that's all, you're ready to initiate a full-fledged transfer.
Service transfer
Service transfer is the easiest of the steps for migrating to Angular. Having written a new service in Angular, you can easily connect it to AngularJS parts of your application. ngUpgrade provides a very convenient tool to achieve the purpose:
import {downgradeInjectable} from '@angular/upgrade/static';
angular.module('app')
.factory('AngularService', downgradeInjectable(AngularService));
The service is ready to use inside AngularJS, no additional settings are needed.
Sometimes it happens that you must use the AngularJS service in Angular, and you haven’t upgraded it yet. That's all right! You may safely connect it in the appropriate module through the factory.
...
providers: [
{provide: 'AngularjsService', useFactory: (i: any) => i.get('AngularjsService'), deps: ['$injector']}
],
...Now you can work with the AngularJS service inside the Angular framework. It's easy, isn't it?
Of course, there are pitfalls either. Among others, you won't be able to reuse interceptors, and they'll have to be rewritten. But as a rule, there are not so many of them in the application, and they contain not too complicated code, so you can cope with such additional work with no trouble.
Component transfer
You can use the Angular component in the AngularJS part of the application by means of the downgradeComponent function. It's aimed at creating a helper directive that allows the Angular component to be available in AngularJS.
angular.module('app')
.directive('appAngularComponent', downgradeComponent({component: AngularComponent}))And, of course, don't forget to add your components to the entryComponents array. Otherwise, they won’t be compiled.
@NgModule({
declaration: [...],
imports: [...],
providers: [...],
entryComponents: [AngularComponent]
})Migrating the AngularJS components to the new Angular app is a slightly more complex process than migrating services. If, say, your component uses ng-include or ng-transclude, you won't be able to transfer it as it is. You'll have to rewrite it a little bit.
In the general case, the component should be transferred as follows.
Create a directive inside the Angular app.
@Directive({
selector: 'ng1'
})
export class UseAngularjsDirective extends UpgradeComponent {
constructor(elementRef: ElementRef, injector: Injector) {
super('ng1', elementRef, injector);
}
}A directive is ready to use.
Routing
Quite a lot of existing AngularJS projects take advantage of ui-router to organize routing within the application. In this case, there are no problems in the implementation of hybrid routing, when part of the routes is declared in the AngularJS coverage area, and some of them are in the Angular coverage area.
You can achieve complete interaction using a hybrid ui-router which allows you to fully work with the application routing.
Summary
Today there are more and more Angular app examples, and developers are continuing to migrate AngularJS to Angular.
Fortunately, the task is greatly facilitated by a good toolkit, which ensures the stable operation of the hybrid AngularJS/Angular app and helps you perform the transfer in stages, without prejudice to the introduction of new features and business development.
Therefore, if you failed to create a simple Angular app in the first place (because at that time there was no Angular module config), then now you know the key details of the AngularJS application migration path. And if you're versed in questions of web development, you’ll be able to independently carry out the above process. Otherwise, you had better hire qualified assistance. And we're ready to provide it!
Our Agilie company has gained vast experience in upgrading applications to Angular, and this experience is supported by a strong knowledge base of our experts including AngularJS and Angular developers. It means we’ll work through all the steps for migrating to Angular as quickly and efficiently as possible.
Anyway, if you need an Angular team to upgrade your app in accordance with this guide, feel free to contact us! We know how to build an Angular app or update your AngularJS project to the necessary level. And we'd be happy to discuss any of your Angular app ideas.
