{"id":7933,"date":"2017-07-04T17:14:26","date_gmt":"2017-07-04T17:14:26","guid":{"rendered":"https:\/\/blog.uruit.com\/?p=7933"},"modified":"2023-05-31T08:54:44","modified_gmt":"2023-05-31T11:54:44","slug":"angular-1-vs-2-migrate","status":"publish","type":"post","link":"https:\/\/uruit.com\/blog\/angular-1-vs-2-migrate\/","title":{"rendered":"Migrate to Angular:<br> why and how you should do it [UPDATED]"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_17 counter-hierarchy counter-decimal ez-toc-grey\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\">Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" style=\"display: none;\"><i class=\"ez-toc-glyphicon ez-toc-icon-toggle\"><\/i><\/a><\/span><\/div>\n<nav><ul class=\"ez-toc-list ez-toc-list-level-1\"><li class=\"ez-toc-page-1 ez-toc-heading-level-1\"><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/uruit.com\/blog\/angular-1-vs-2-migrate\/#Migrate_to_Angular_why_and_how_you_should_do_it\" title=\"Migrate to Angular: why and how you should do it\">Migrate to Angular: why and how you should do it<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/uruit.com\/blog\/angular-1-vs-2-migrate\/#Why_do_people_hesitate_to_migrate\" title=\"Why do people hesitate to migrate?\">Why do people hesitate to migrate?<\/a><ul class=\"ez-toc-list-level-4\"><li class=\"ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/uruit.com\/blog\/angular-1-vs-2-migrate\/#Fear_of_the_unknown\" title=\"Fear of the unknown\">Fear of the unknown<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/uruit.com\/blog\/angular-1-vs-2-migrate\/#Fear_of_your_existing_code\" title=\"Fear of your existing code\">Fear of your existing code<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/uruit.com\/blog\/angular-1-vs-2-migrate\/#Fear_of_change\" title=\"Fear of change\u00a0\">Fear of change\u00a0<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/uruit.com\/blog\/angular-1-vs-2-migrate\/#Reasons_why_you_should_migrate_to_Angular\" title=\"Reasons why you should migrate to Angular\">Reasons why you should migrate to Angular<\/a><ul class=\"ez-toc-list-level-4\"><li class=\"ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/uruit.com\/blog\/angular-1-vs-2-migrate\/#1_Perform_like_never_before\" title=\"#1 Perform like never before\">#1 Perform like never before<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/uruit.com\/blog\/angular-1-vs-2-migrate\/#2_Get_advantages_from_new_features\" title=\"#2 Get advantages from new features\">#2 Get advantages from new features<\/a><ul class=\"ez-toc-list-level-5\"><li class=\"ez-toc-heading-level-5\"><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/uruit.com\/blog\/angular-1-vs-2-migrate\/#Innovative_features\" title=\"Innovative features\">Innovative features<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/uruit.com\/blog\/angular-1-vs-2-migrate\/#_3_Go_Mobile_with_Angular\" title=\"\u00a0#3 Go Mobile with Angular\">\u00a0#3 Go Mobile with Angular<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/uruit.com\/blog\/angular-1-vs-2-migrate\/#_4_Execute_better_with_components_and_modules\" title=\"\u00a0#4 Execute better with components and modules\">\u00a0#4 Execute better with components and modules<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/uruit.com\/blog\/angular-1-vs-2-migrate\/#5_Migrate_smoothly\" title=\"#5 Migrate smoothly\">#5 Migrate smoothly<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/uruit.com\/blog\/angular-1-vs-2-migrate\/#When_should_I_migrate_to_Angular\" title=\"When should I migrate to Angular?\">When should I migrate to Angular?<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/uruit.com\/blog\/angular-1-vs-2-migrate\/#How_can_I_manage_the_Angular_migration\" title=\"How can I manage the Angular migration?\">How can I manage the Angular migration?<\/a><ul class=\"ez-toc-list-level-4\"><li class=\"ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/uruit.com\/blog\/angular-1-vs-2-migrate\/#Vertical_Slicing\" title=\"Vertical Slicing\">Vertical Slicing<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/uruit.com\/blog\/angular-1-vs-2-migrate\/#Horizontal_Slicing\" title=\"Horizontal Slicing\">Horizontal Slicing<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/uruit.com\/blog\/angular-1-vs-2-migrate\/#To_sum_up\" title=\"To sum up\">To sum up<\/a><ul class=\"ez-toc-list-level-5\"><li class=\"ez-toc-heading-level-5\"><ul class=\"ez-toc-list-level-5\"><li class=\"ez-toc-heading-level-5\"><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/uruit.com\/blog\/angular-1-vs-2-migrate\/#Back_to_Angular\" title=\"Back to Angular\">Back to Angular<\/a><\/li><\/ul><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/uruit.com\/blog\/angular-1-vs-2-migrate\/#About_us\" title=\"About us\">About us<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h1><span class=\"ez-toc-section\" id=\"Migrate_to_Angular_why_and_how_you_should_do_it\"><\/span><span data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;Migrate to Angular: why and how you should do it&quot;}\" data-sheets-userformat=\"{&quot;2&quot;:15231,&quot;3&quot;:{&quot;1&quot;:0},&quot;4&quot;:{&quot;1&quot;:2,&quot;2&quot;:16777215},&quot;5&quot;:{&quot;1&quot;:[{&quot;1&quot;:2,&quot;2&quot;:0,&quot;5&quot;:{&quot;1&quot;:2,&quot;2&quot;:0}},{&quot;1&quot;:0,&quot;2&quot;:0,&quot;3&quot;:3},{&quot;1&quot;:1,&quot;2&quot;:0,&quot;4&quot;:1}]},&quot;6&quot;:{&quot;1&quot;:[{&quot;1&quot;:2,&quot;2&quot;:0,&quot;5&quot;:{&quot;1&quot;:2,&quot;2&quot;:0}},{&quot;1&quot;:0,&quot;2&quot;:0,&quot;3&quot;:3},{&quot;1&quot;:1,&quot;2&quot;:0,&quot;4&quot;:1}]},&quot;7&quot;:{&quot;1&quot;:[{&quot;1&quot;:2,&quot;2&quot;:0,&quot;5&quot;:{&quot;1&quot;:2,&quot;2&quot;:0}},{&quot;1&quot;:0,&quot;2&quot;:0,&quot;3&quot;:3},{&quot;1&quot;:1,&quot;2&quot;:0,&quot;4&quot;:1}]},&quot;8&quot;:{&quot;1&quot;:[{&quot;1&quot;:2,&quot;2&quot;:0,&quot;5&quot;:{&quot;1&quot;:2,&quot;2&quot;:0}},{&quot;1&quot;:0,&quot;2&quot;:0,&quot;3&quot;:3},{&quot;1&quot;:1,&quot;2&quot;:0,&quot;4&quot;:1}]},&quot;9&quot;:0,&quot;11&quot;:3,&quot;12&quot;:0,&quot;14&quot;:{&quot;1&quot;:2,&quot;2&quot;:0},&quot;15&quot;:&quot;Calibri&quot;,&quot;16&quot;:11}\">Migrate to Angular: why and how you should do it<\/span><span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p><span style=\"font-weight: 400;\">Are you thinking about <strong>migrating your AngularJS to more recent or latest (as the best option) version of Angular<\/strong> (AKA: Angular 2 and beyond)? The increasing number of features, performance, and speed of the latest Angular version increases the constant desire of updating your app to take all the advantages of a serious and robust framework with more than 3 years as Angular. As you probably don\u2019t know (or hopefully yes), AngularJS entered a 3-year Long Term Support on July 1, 2018. This means less than 2 years until it\u2019ll be considered deprecated. So the time to migrate is now!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">New versions of Angular came with several groundbreaking changes regarding Angular 1.x, making migration a huge deal. While its learning curve isn\u2019t that high, its stark changes from the earlier versions could be somewhat hard to swallow. The upgrade stirred up a lot of fear and questions within the community. We got to the point of many not knowing if they should really upgrade their applications or just start all over from scratch.<\/span><\/p>\n<p><i><span style=\"font-weight: 400;\">Is it the right time to upgrade? Is it even possible? Will it require a ton of work? Will the business accept these changes? Should I hire new developers?<\/span><\/i><\/p>\n<hr \/>\n<div class='_form_7'><\/div><script type='text\/javascript' src='https:\/\/uruit73629.activehosted.com\/f\/embed.php?static=0&id=7&69F3AE1416D21&nostyles=1&preview=0'><\/script>\n<hr \/>\n<p><span style=\"font-weight: 400;\">There are some concerns among the community regarding the migration. However, we can assure you that the advantages far outweigh the challenges! Keep reading to find out why.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Why_do_people_hesitate_to_migrate\"><\/span><span style=\"font-weight: 400;\">Why do people hesitate to migrate?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><a href=\"https:\/\/twitter.com\/stephenfluin\" class=\"external\" rel=\"nofollow\"><b>Stephen Fluin<\/b><\/a><span style=\"font-weight: 400;\">, <\/span><b>Google Developer Advocate for Angular<\/b><span style=\"font-weight: 400;\">, says that there are three main reasons why companies currently avoid migration:<\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"Fear_of_the_unknown\"><\/span><b>Fear of the unknown<\/b><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<blockquote><p><span style=\"font-weight: 400;\">Companies who haven\u2019t done the migration before don\u2019t know what sorts of challenges they will run into. Often times companies attempt to address old pains and new requirements at the same time as upgrading a codebase, and these additional factors can put a major project like this at risk.<\/span><\/p><\/blockquote>\n<h4><span class=\"ez-toc-section\" id=\"Fear_of_your_existing_code\"><\/span><b>Fear of your existing code<\/b><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<blockquote><p><span style=\"font-weight: 400;\">Many companies who have large codebases written in AngularJS haven\u2019t had as strict policies about code control as they might like. Many companies haven\u2019t been following a standardized architecture or best practices. They understand that as part of the migration process, they may have to fix the problems that already exist in their code.<\/span><\/p><\/blockquote>\n<h4><span class=\"ez-toc-section\" id=\"Fear_of_change\"><\/span><b>Fear of change\u00a0<\/b><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<blockquote><p><span style=\"font-weight: 400;\">Each technology within a company builds up its own momentum of shared understanding, tooling, and a \u2018happy path\u2019 is typically worn and distributed socially within a company. Changing technologies means that some of the best practices and shared understandings have to be rebuilt. Angular has attempted to mitigate this by leveraging the same core principles and philosophies as AngularJS.<\/span><\/p><\/blockquote>\n<p><span style=\"font-weight: 400;\">In this post, we are going to explain why you should be upgrading. Also, we will share some of the best ways to migrate to Angular. Here you will find the experiences of UruIT, the Angular team (represented by Stephen), and the overall Angular community.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Reasons_why_you_should_migrate_to_Angular\"><\/span><span style=\"font-weight: 400;\">Reasons why you should migrate to Angular<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-9672\" src=\"http:\/\/uruit.com\/blog\/wp-content\/uploads\/2017\/07\/IMG_7786-e1565368046832.jpg\" alt=\"\" width=\"1200\" height=\"800\" srcset=\"https:\/\/uruit.com\/blog\/wp-content\/uploads\/2017\/07\/IMG_7786-e1565368046832.jpg 1200w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2017\/07\/IMG_7786-e1565368046832-300x200.jpg 300w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2017\/07\/IMG_7786-e1565368046832-1024x683.jpg 1024w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2017\/07\/IMG_7786-e1565368046832-768x512.jpg 768w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2017\/07\/IMG_7786-e1565368046832-750x500.jpg 750w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2017\/07\/IMG_7786-e1565368046832-1140x760.jpg 1140w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2017\/07\/IMG_7786-e1565368046832-20x13.jpg 20w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<h4><span class=\"ez-toc-section\" id=\"1_Perform_like_never_before\"><\/span><span style=\"font-weight: 400;\">#1 Perform like never before<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">The migration\u2019s main advantage is its boost in performance, since <\/span><b>Angular is 5 times faster than Angular JS<\/b><span style=\"font-weight: 400;\">. As Stephen says, you can begin server-rendering your application. \u201cYou are looking for better runtime performance.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">During the release candidate period it was noted that numerous developers reduced their final bundles\u2019 size after migrating to the latest version. To accomplish this, the Angular team made some changes in the AOT (\u201cAhead-Of-Time Compilation\u201d), which resulted in applications compiled prior to being sent to the browser by the angular compiler. <strong>As a result and because of the reduced compilation time, it\u2019s easier for the browser to download the code and execute it much faster.<\/strong><\/span><\/p>\n<p><span style=\"font-weight: 400;\">Also, some specific packages (i.e. animations) were separated from the Angular core package. Therefore, the app is lighter in size and faster to run. Likewise, this brings security benefits. The application is less prone to injection attacks, as AOT compiles HTML templates into JavaScript files, removing those templates from the final bundle.<\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"2_Get_advantages_from_new_features\"><\/span><span style=\"font-weight: 400;\">#2 Get advantages from new features<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Angular CLI gives you the ability to create everything you need on your Angular app with just a simple command on your terminal. Something as simple as `ng generate component users` will create a complete component with the basic boilerplate and files to start working on your component: template, styles, test and typescript file. Not only components, <strong>you can create modules, services, pipes, even a new Angular project that will prevent you from the tedious work of creating all the basic configuration.<\/strong> You can also create your own custom schematics in case you need to.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Differential loading is also a new feature, in which Angular allows you to create two different builds: one for ES5 and another one for ES6. Depending on how up to date is the browser you use to navigate your app, it will load one of the builds so it can take advantage of state of the art JavaScript (ES6) or the polyfills and compilation required to make your app work as expected (ES5). This will improve build sizes by splitting functionalities according to what each bundle needs.<\/span><\/p>\n<h5><span class=\"ez-toc-section\" id=\"Innovative_features\"><\/span>Innovative features<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p><span style=\"font-weight: 400;\">Also, there are two features that even though they\u2019re considered experimental right now, will have full support on version 9, Bazel and Ivy. Bazel allows us to divide our project into different build units, which can be as granular as a NgModule. This means that if there\u2019s a change that concerns only one module, this one should be rebuilt while keeping the rest of the app intact.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Finally, Angular Ivy is the 3rd version of the angular renderer, and will bring features like <strong>smaller bundles, faster compilation times and dynamic load of components and modules.<\/strong> We will also have the opportunity to implement concepts as High Order Components, which is a common concept in other frameworks and libraries as React. a HOC is a function which receives a component as a parameter and returns a new instance of the component with the changes and modifications needed.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">There are other features that you can take advantage of using Angular 2+. Some of them are Inputs and Outputs on template, dependency injection and content projection, and of course all the new features provided by the newer versions of Typescript.<\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"_3_Go_Mobile_with_Angular\"><\/span><span style=\"font-weight: 400;\">\u00a0#3 Go Mobile with Angular<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Another plus is its <\/span><b>mobile-driven approach<\/b><span style=\"font-weight: 400;\">. Unlike version 1.x, latest versions were designed to create native mobile apps by using strategies from other mobile-oriented frameworks such as Nativescript, Ionic Framework or React Native. For example, lazy loading makes Angular compile different modules when they are actually needed instead of compiling all the application at once. It makes the resulting code lighter and the initial load time will be much faster. Moreover, the framework\u2019s improvement in performance will make the mobile application way smoother than it could have been if it had been developed by AngularJS.<\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"_4_Execute_better_with_components_and_modules\"><\/span><span style=\"font-weight: 400;\">\u00a0#4 Execute better with components and modules<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">The general structure of Angular applications (component-based) makes it easier to understand than 1.x versions. This new approach makes developers focus on building classes, called components, which replace the \u201cViews\u201d and \u201cControllers\u201d that defined Directives from earlier versions. This helps testability and maintainability as concerns are clearly separated and tests are easier to write.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Along with these changes, the fact that the framework is written in Typescript (a typed superset of JavaScript) helps reduce runtime errors as mistakes can be found before transpiling. This may also help developers experienced in OOP (i.e. C#) learn the framework faster as the syntax and approach is similar to that kind of language. Stephen guarantees that by migrating, you can also take advantage of <\/span><b>powerful new capabilities. Some of them are ES2016 syntax, Code Splitting and PWAs<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Modules allow you to separate your code in different units according to what each one should do, making it easier to you to understand where something is located and also where a new component should be. Y<\/span><span style=\"font-weight: 400;\">ou can create a module for login, another for user settings, another one for shared components that you will use throughout your entire app and each one of those will only import the libraries and components needed for this unit to work. This in use with lazy loading will create smaller chunks of code so that when you navigate to a specific route only this chunk will be loaded by the browser, making your load times faster by only showing what the user needs at that exact moment.<\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"5_Migrate_smoothly\"><\/span><span style=\"font-weight: 400;\">#5 Migrate smoothly<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Finally, another central benefit is the fact that <\/span><b>both frameworks could live in the same application.<\/b><span style=\"font-weight: 400;\"> Therefore, it can help developers to upgrade it gradually. Also, it allows third-party libraries used in AngularJS to continue working after migrating.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So, for the time being, the time to upgrade is<\/span><i><span style=\"font-weight: 400;\"> now.<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">These benefits will keep your users thrilled with your apps as a result of them working more smoothly and faster. Moreover, being up-to-date with the latest technology trends will inspire developers to become more motivated and skilled. That\u2019s how Stephen summarizes why your team will definitely be up for migrating: <\/span><\/p>\n<div class=\"tweet-box ctt-box-design-1 \" style=\"display:inline-block;\">\n\t\t<a href=\"https:\/\/twitter.com\/home?status=%22Your+developers+want+to+write+Angular%22+says+%40stephenfluin+.+Find+out+why%3A+www.uruit.com%2Fblog%2F2017%2F07%2F04%2Fangular-1-vs-2-migrate%2F\" target=\"_blank\" class=\"external\" rel=\"nofollow\">\n\t\t\t<p class=\"ctt-font-original\">\"Your developers want to write Angular\u201d says @stephenfluin \u200f<\/p>\n\t\t\t<div class=\"click-to-tweet\"><i><\/i><span class=\"cta-pr\">Click To Tweet<\/span><\/div>\n\t\t<\/a>\n\t<\/div>\n<h3><span class=\"ez-toc-section\" id=\"When_should_I_migrate_to_Angular\"><\/span><span style=\"font-weight: 400;\">When should I migrate to Angular?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">There is no exact time to migrate. Actually, <strong>it will depend on how the product is built or how it is in the process of being built.<\/strong> Best practices make it easier to rewrite code in the new framework. If you don\u2019t follow them, migrating an existing application could be an arduous task to complete. However, if you were developing an AngularJS application taking into account a future migration, then the upgrade is possible whenever the team and busines<\/span><span style=\"font-weight: 400;\">s feel confident in doing so.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-8031 size-full\" src=\"https:\/\/uruit.com\/blog\/wp-content\/uploads\/2017\/07\/ng-conf.jpg\" alt=\"Angular 1 vs 2\" width=\"900\" height=\"720\" srcset=\"https:\/\/uruit.com\/blog\/wp-content\/uploads\/2017\/07\/ng-conf.jpg 900w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2017\/07\/ng-conf-300x240.jpg 300w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2017\/07\/ng-conf-768x614.jpg 768w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2017\/07\/ng-conf-750x600.jpg 750w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2017\/07\/ng-conf-20x16.jpg 20w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"How_can_I_manage_the_Angular_migration\"><\/span><span style=\"font-weight: 400;\">How can I manage the Angular migration?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The most common ways to upgrade applications are vertical and horizontal slicing, each with its own pros and cons.<\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"Vertical_Slicing\"><\/span><b>Vertical Slicing<\/b><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Firstly, the Vertical Slicing strategy consists of <\/span><b>upgrading the application module by module. <\/b><span style=\"font-weight: 400;\">It means both frameworks coexist, but in different parts of the application, so each \u201cfeature\u201d will have to deal only with \u201cone Angular\u201d at a time. Thus, the way to implement this is to choose one top-level component and start upgrading its child components until the whole module is in the latest version.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As the migration is encapsulated within features\/routes, it results in better maintainability, testing and debugging of the application. Also, there\u2019s an increase in performance of the updated Angular modules. This approach suits large applications maintained by different teams. That\u2019s because each team can focus on upgrading its own modules without affecting the rest of the application. However, keep in mind it could result in code duplication for some time. Therefore, you may need older versions of some components to keep some dependencies from breaking.<\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"Horizontal_Slicing\"><\/span><b>Horizontal Slicing<\/b><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">On the other hand, the Horizontal Slicing approach consists of<\/span><b> migrating from the bottom level working your way up to the top of the application<\/b><span style=\"font-weight: 400;\">. The positive aspects of this strategy are that it\u2019s easy to start with and you can avoid code duplication. However, the application becomes hard to debug and understand as both frameworks coexist in the same modules. As it\u2019s not encapsulated, it makes it difficult to coordinate between different teams. Because if one changes a single component, it may affect the rest of the application. So, this approach works better for smaller apps and teams. Also, both frameworks are loaded for every module, affecting performance. Unfortunately, is not possible to take advantage of all the benefits that each framework brings.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"To_sum_up\"><\/span><span style=\"font-weight: 400;\">To sum up<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Needless to say, both approaches have the same risks as refactoring. So this could affect time of delivery and break existing functionalities, if not done correctly.<\/span><\/p>\n<p><b>However, there is so much to gain in updating an Angular application that there should be no doubt about whether you should upgrade or not, but rather about when and how. <\/b><span style=\"font-weight: 400;\">Based on our experience, these strategies cover most of the cases and should offer a comfortable and safe migration, without any considerable effort besides learning and taking into account Angular\u2019s best practices. We have been working with Angular for quite some time now. Therefore, we like to say our software development projects have evolved along with the technology!<\/span><\/p>\n<h5><span class=\"ez-toc-section\" id=\"Back_to_Angular\"><\/span><span style=\"font-weight: 400;\">Back to Angular<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p><span style=\"font-weight: 400;\">There is plenty of material shared in the<\/span><a href=\"https:\/\/www.youtube.com\/user\/ngconfvideos\" class=\"external\" rel=\"nofollow\"><span style=\"font-weight: 400;\"> NG-Conf YouTube channel<\/span><\/a><span style=\"font-weight: 400;\"> regarding why we should use the new versions of the framework and the improvements that will be made to the applications! Moreover, I especially recommend this talk by Victor Savkin called<\/span><a href=\"https:\/\/www.youtube.com\/watch?v=izpqQpD8RQ0\" class=\"external\" rel=\"nofollow\"><span style=\"font-weight: 400;\"> Upgrading Enterprise Angular Applications<\/span><\/a><span style=\"font-weight: 400;\">, upon which I based the idea of this post. Angular also has <\/span><a href=\"https:\/\/angular.io\/guide\/upgrade\" class=\"external\" rel=\"nofollow\"><span style=\"font-weight: 400;\">an upgrade guide<\/span><\/a><span style=\"font-weight: 400;\"> that will explain it in a more technical way.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can also get more insights from the <\/span><b>eBook<\/b><span style=\"font-weight: 400;\"> we shared at the beginning of this post. If you haven\u2019t downloaded it yet, do it now! Read the full article about how we facilitated one of our <\/span><a href=\"https:\/\/uruit.com\/nearshore-software-outsourcing-to-south-america\"><span style=\"font-weight: 400;\">nearshore outsourcing<\/span><\/a><span style=\"font-weight: 400;\"> partners\u2019 migration from AngularJS to Angular.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In addition, if you are planning to update your app between different versions of Angular (5 to 6, for example) the Angular guys have released <a href=\"https:\/\/update.angular.io\/\" class=\"external\" rel=\"nofollow\">a guided site<\/a><\/span><span style=\"font-weight: 400;\">\u00a0where you can select from and to which versions you want to upgrade, the complexity of your app and a few other choices. It then gives you a step by step guide in order to update your app in a smoother and correct way without breaking anything.<\/span><\/p>\n<p><em>Post updated on August 9th, 2019, by the software developer <a href=\"https:\/\/twitter.com\/miguelopezv\" class=\"external\" rel=\"nofollow\">Miguel L\u00f3pez<\/a>.<\/em><\/p>\n<hr \/>\n<h3><span class=\"ez-toc-section\" id=\"About_us\"><\/span><b>About us<\/b><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">UruIT works with US companies, from startups to Fortune 500 enterprises, as nearshore partner for project definition, application design, and technical development. Our Uruguay and Colombia-based teams have worked on over 150 design and development projects up to date.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Are you ready to make the leap in your software development project? <\/span><a href=\"https:\/\/uruit.com\/contact\"><span style=\"font-weight: 400;\">Tell us about your project <\/span><\/a><span style=\"font-weight: 400;\">and let\u2019s talk.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Contents Migrate to Angular: why and how you should do itWhy do people hesitate to migrate?Fear of the unknownFear of your existing codeFear of change\u00a0Reasons why you should migrate to&#8230;<\/p>\n","protected":false},"author":19,"featured_media":8025,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[276],"tags":[],"_links":{"self":[{"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/posts\/7933"}],"collection":[{"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/comments?post=7933"}],"version-history":[{"count":6,"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/posts\/7933\/revisions"}],"predecessor-version":[{"id":11245,"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/posts\/7933\/revisions\/11245"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/media\/8025"}],"wp:attachment":[{"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/media?parent=7933"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/categories?post=7933"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/tags?post=7933"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}