Hello, community! In this article, I want to share with you some alternative ways to Angular migration and simple ways to do it. I hope to be useful with my advice and experience. Also, I will tell you about the benefits of migration and dispel fears about the complexity of the process.
Angular is a TypeScript-based web app framework led by the Angular team at Google. Angular helps to create interactive single-page apps (SPAs) using HTML and TypeScript. Angular is friendly to use, so it is very popular among both beginners and professional developers. This greatly simplifies the whole process of creating and structuring JavaScript code. In other words, it contains everything that developers need to create a dynamic single page app.
And further, I would like to share with you some reasons why developers choose Angular:
- most people have chosen this framework because it has a large community;
- someone agreed that Angular presents the future of web development;
- Google’s support of Angular was frequently mentioned;
- state administration library of dissimilar flavors;
- profound integration.
Angular gives the developer all its capabilities and resources to make a truly decent product, so it is not surprising that global companies use Angular, for example, MacDonald’s, YouTube, Nike, Autodesk and etc.
Benefits of Angular migration
Angular is an improved version of AngularJS. Because Angular is an open-source framework, it helps to build dynamic one-page apps (SPAs). Also, this variety of frameworks has features such as two-way data binding, templates, and dependencies.
Angular solves some problems that developers have encountered in AngularJS: the concept of “range” and configuration of controllers. Also, reactive programming has been simplified with RXJS integration. In addition, it is difficult to switch from one version of the framework to another, but in each new version, there are new features that simplify and diversify the creation of products.
An alternative way to Angular migration
An alternative migration route from AngularJS to Angular is migration using tools. This is a fairly new way, but today there are several tools on the market that are actively gaining popularity, and their developers are improving their products to make it easier for users to change Angular.
In general, the reason why they started looking for alternative ways of migration is the complexity of normal migration. It requires both extraordinary efforts during and after the process, too. Many developers doubt whether they will be able to do it or do not want to spend so much time on it (an experienced specialist will need 2-3 weeks) and at best for 3 weeks to drop out of work. Therefore, the tools are aimed at accelerating the simplification of the Angular migration process.
Now, I want to tell you about the tool AngularHeroes.
The tool uses the Marvel API and is created using AngularJS 1.6.9 and AngularJS Material 1.1.7. Its system is clear and built so that all possible elements can be easily transferred from AngularJS to Angular. src folder is divided into two subfolders: one with a name app that contains JavaScript files that, in turn, are divided into modules, and the other is called content for CSS files and images.
So, let’s talk about migration with AngularHeroes
1. The first step is to install the Angular CLI. To do this, open the command line and enter the command:
$ npm install -g @ angular / cli @ 1.7.4
Next, create an empty app using the command line:
$ ng new my-app
Next, we need to move the code to the new Angular range. Then remove the lite-server configuration and part of the gulp tasks because we will work with Angular CLI.
All persistent elements are walked to the newly made assets folder and global CSS styles are copied to styles.css.
So, we set the principal host of the Angular CLI configuration file to app.js to determine the starting point of our app.
2. TypeScript. Next, we set the principal host of the Angular CLI configuration file to app.jsdetermine, the starting point of our app. The most ideal option (and most commonly used) is to change all Javascript files (* .js) to Typescript (* .ts).
At the same time, it is necessary to start using ES6 operators in the code such as let, const, and arrow functions. Next, we set the typeRoots property in compilerOptionsfrom the tsconfig.app.jsonfile, so that the Typewriter compiler recognizes the installed types.
“typeRoots”: [
“../node_modules/@types”
]
Now is a great time to create some changes to the AngularJS code, so you need to transfer all the elements of the framework to ES6 classes and export them.
Declare the variable Angular star where you use it to make the tslint compiler positive.
var angular: angular.IAngularStatic;
Next, we add types to services and elements. Finally, you can remove the bower and set the npm packet dependency instead. This will allow you to download library and source code thanks to RequireJS from the app.tsfile.
Attention! Delete paths from scripts when bring files with RequireJS.
3. Bootstrap. In the third stage, we will combine AngularJS and Angular, and then step by step remove the components of the first framework, but all step by step again, so as not to harm the performance of the app. In order for the program to be read as a hybrid, you must install @ angular / upgrade npm. Next, create a common module of Angular AppModule and bring in UpgradeModule.
Next, make the principal.ts file from which you want to log in to the program, and change the principal property in the .angular-cli.json file accordingly.
4. Configuration and error handling. At this stage, you need to create your own ErrorHandler parameter that handles global errors. Files located in the project root environment folder are made mechanically thanks to the Angular CLI. In each of them, you need to specify the URL and key of the Marvel API developer, and then the rest of the program configuration parameters.
To have your own error handler, you must bring the handleError technique of the ErrorHandler interface. This will help the process of finding errors and to overcome the services that will solve them. The registrer function, which is located in the context of AngularJS, needs to be updated for future use.
5. Upgrade services. Now let’s start updating the services of the principal modules and third-party library, such as an Angular resource that works with HTTP data. And now we bring in Angular in the necessary CoreModule.
So we add a new HTTP user via the @ angular / http command for Angular. Next, you should bring in HttpClientModule into the principal module of the program, and all services that worked thanks to its HttpClient automatically become Angular and are upgraded because there are elements of AngularJS that use them.
And at the end of this stage, we make Angular modules for each function module in one file with the AngularJS module definition, except for the layout and widgets, which will be updated further.
6. Upgrade components. At this stage, we will update the components of the program and work with various bibliotecas such as AngularJS Material.
First of all, install the @ angular / material npm package and create the AppMaterialModule. Its function is to bring in and export Angular Material items. Next, update the widget module and give another name to the shared folder. Also, you can update the elements of the functional modules AngularJS.
Now, to save the code as a bulk module, we transmogrify the module layout to AppComponent, which takes up much less memory.
Finally, we build a new version of $ stateservice in the ajs-upgraded-provider.ts file and create a new Angular command to simulate the behavior of the ui-sref command.
7. Upgrade router. In general, this is a rather complicated process, but nothing is impossible! In general, the Angular ui-router (or other routing library) should work together during the process. To do this, we install the @ angular / router npm package and then work with the elements to interact with the routerLink directive instead of the one we made earlier. And finally, update the AppComponent and move it to Angular.
And now we must delete AngularJS.
Conclusion
In this article, I told you about an alternative of migrating from AngularJS to Angular using tools. I hope that this was an extremely interesting and informative process for you. I am inclined to believe that my experience was useful for you and will help you with the migration of Angular with the help of tools.
