Migrating From Angular 1.x to Angular 2+

Editor's Notes

• #2: Welcome to this webinar on how to migrate from Angular 1
• #3: Specifically this is going to cover a technique that I used with my clients, those who really can’t use the word big bang. When I use the word “big bang” i mean a re-write from scratch approach. Either tools down and everyone chips in, no other work gets done approach. Or a parallel project and trying to keep worked synced between the two.
• #4: As anyone who’s tried to do a big bang upgrade before knows it’s always a lot more complex and risky than you thought at first. iterative step by step approach at each stage you have a releasable product.
• #5: How is this structured? First the theory behind what we are doing, the mental model. Then i’ll describe the plan, something pretty generic that you can apply to your projects. Then we’ll dive in with a real case study. Now this is a workshop that I do that takes a whole day, so we can’t cover all it in the hour. - I am going to cover the highlights. I am going to show you snippets of code but i’m not going to write any, there just isn’t time and too much to get through. You will get a copy of this video after the webinar finishes so don’t worry. And i’ll send out source code for the project as well so you can dig into the details.
• #6: To get the most out of this you will be someone who AngularJS ES6 & TypeScript Angular
• #7: My name is Asim, I run codecraft.tv where I do consulting and training on Angular and JS.
• #8: I recently released a book on Angular 2 called Angular 2: From Theory to Practice. It was funded by Kickstarter so is FREE You can find it on Amazon, iBooks The best place to read it is via my website, there are accompanying videos and that gets updated much much faster than the other stores. So you’ve got no excuse really to not learn Angular 2!
• #9: First a word mapping!
• #10: Demo the contacts application
• #11: Demo the contacts application
• #12: Demo the contacts application
• #13: Demo the contacts application
• #14: Demo the contacts application
• #15: Demo the contacts application
• #16: Demo the contacts application
• #17: When i mention an entity, i mean a comonent, service, filter, pipe, controller… a single thing in the app.
• #18: [WALK AND TALK] Upgrading is the process of just increasing the version number of your application. Migrating is the process of updating your application step by step from one version to the next. One doesn’t imply the other, a migration is a slow, iterative, careful upgrade, an upgrade isn’t necessarily a migration. For example you upgrade your operating system, if half the apps break during the upgrade tough shit, nothing works, the app is unusable until you find an answer. With migration You always working on one code base. You always have a releasable app.
• #19: STEP DEMO Demo App Describe the different entities
• #20: So i was practising this with my girl friend and afterwards she said she doesn’t think i know what a mental model really is? But i reckon i know..
• #22: [WALK AND TALK] This is a simplified view of our app Some top level directives/controllers which consume other directives/controllers and perhaps some services
• #23: While migrating we run both Angular 1 and Angular 2 in the same application! We call this a Hybrid application. So yeah, during the process of migration your users will have to download both but that’s the price you’ll have to pay.
• #24: Notice the EDIT and SERVICE (they have animations) In a hybrid application some entities can be written in Angular 2 and some in Angular 1. They work together and the application still runs.
• #25: The question is… Is Angular 1 running inside Angular 2? Is Angular 2 running inside Angular 1? Angular 1 is always bootstrapped first and owns the bottom most view.
• #26: Who is pretty comfortable with their knowledge of Zones? The new application is running in Angular 2+ zone, and therefore it no longer needs calls to $apply().
• #27: The second mental model is that it’s a cross dresser.
• #28: We have a 1 entity and a 2 entity. They both wear different clothes. They don’t see each other. So what we can do is we can upgrade 1 downgrade 2 Now an upgraded 1 can be used in an 2 entity or a 1 entity or even an upgraded 2 entity. [WALK AND TALK] Same goes for a downgraded Angular entity
• #29: [WALK AND TALK] DI also still works. We can have a downgraded Angular 2 service that’s injected into a 2 or 1 entity. It’s also the same instance, so any data you set will be visible from the other entity
• #30: The final mental model
• #31: Each HTML node can only belong to either Angular 1 or Angular 2 Example above the nodes are all controlled by Angular 1 Our goal therefore is to slowly transform all the entities to Angular 2. You can go at this whichever direction you want.
• #32: An Angular 1 component is managed by Angular 1 and only knows Angular 1. So if we tried to insert an Angular 2 entity into an Angular 1 entity It wouldn’t blow up, the Angular 1 component just doesn’t know what card is so ignores it.
• #33: Downgrade it. Wrapped in Angular 1 clothing Still an Angular 2 component Therefore it doesn’t see the Spinner control Just like before that gets ignored!
• #34: So what we do is upgrade the spinner control We wrap it in Angular 2 clothes so it can be recognised by Angular 2 components.
• #35: Think of the process of migration like a disease.
• #36: We infect an entity with Angular 2. I recommend you stat at the leaves. Downgrade
• #37: Then we slowly spread up the app. NOTICE we only need to downgrade the component that is being used by a 1 entity.
• #38: Then we spread up.
• #39: And up
• #40: And UP
• #41: Until eventually we’ve spread everywhere…
• #42: And then we get rid of 1
• #43: So everything is not all rosy
• #44: Not everything in Angular 1 can be migrated to Angular 2 Some things have to be re-written Filters can’t be migrated. Directives w/out templates and other features will need to be re-written.
• #47: What do I mean by a component? Introduced in Angular 1.5 They are like a simplified and restricted version of a directive. They are also a core part of Angular 2. So moving to components now will make moving to Angular components in the future much easier. Flip between step 1 and step 5 SHOW: ui-router config SHOW: controller -> component config SHOW: directives -> component NOTE: Show $ctrl as syntax
• #49: Start with the router since those are typically the top level nodes in your application, you don’t have to but I find it’s a good place to start.
• #50: DEMO Flip from step 1 to step 5 Show router config for person list. Show code for person list component. Show code for spinner directive.
• #51: Converted all. STILL RUNNING ANGULAR 1 Have some fun! - Lets now start having some fun, es6’ify your app (or typescriptifying depending on how far you take it). Use ES6 contstructs, classes, learn destructing, fat arrow syntax etc..
• #53: A great place to start is the services. Angular 1 services written as ES6 classes are very easy to migrate to Angular 2.
• #54: There is no $resource in Angular 2 There is the Http module which looks very much like the Angular 1 $http module. So spend this time to migrate away from $resource to $http.
• #55: There is no $q in Angular 2 So maybe spend this time re-writing to use the new ES6 Promise syntax.
• #56: Since ES6 classes are just constructor functions. And services in Angular 1 are also just constructor functions and also map to Angular 2 services much better. Spend this time to also move from using factory to service.
• #57: DEMO Flip from step 1 to step 5 SHOW: Contact Resource SHOW: Contact Service
• #58: Now we’ve done all the prep work we are ready for the actual migrate. We just include Angular 2 Create our main AppModule and then instead of bootstrapping that directly we duel boot with both Angular 1 and Angular 2.
• #59: All we are doing is adding Angular to our application.
• #60: We are now here. A duel booted Angular 1 + 2 application, but all of the components/directives/services are all still Angular 1.
• #62: A great place to start is the services. Angular 1 services written as ES6 classes are very easy to migrate to Angular 2.
• #63: Show main.ts
• #64: It’s far easier in my opinion to just go bottom up. Convert the leaves to Angular 2 and then move up the tree. Services are going to be shared by lots of different things in our app so it makes sense to migrate those to Angular 2 first. Thankfully due to our prep it’s going to be pretty easy.
• #65: Going back to our diagram we’ve got two services, ContactService ContactResource Going to migrate ContactService to Angular 2 and then downgrade it so it can be used in Angular 1 and since Resource is only going to be used by an Angular 2 service we migrate it to Angular 2 and don’t need to downgrade it. DEMO Step-7 <> Step-6
• #67: When faced with a 3rd party Angular 1 service Re-write to Angular 2+ yourself Find an Angular 2+ version Upgrade to Angular 2+
• #68: ContactService Compare Step 6 to Step 7 NOTICE: @Injectable() NgModule downgradeInjectable We still have our angular 1 module config at the bottom, but we add to our Angular 1 config a downgraded version of this service. This is what makes our ContactService usable from both an Angular 1 and an Angular 2 entity. NOTICE AGAIN: Toaster It’s not in the diagram to save space but the ContactService also relies on a 3rd party Angular 1 service called toaster? We don’t control toaster, we can migrate it - so how do we make it injectable into an Angular 2 service? We can try to write our own? We can try to find if there is a 3rd party Angular 2 version? We can upgrade an angular 1 service to use in an Angular 2 app. Eventually we’ll have to figure out a solution, we can’t drop Angular 1 till we figure out a solution but for now we can use upgrade. We can Upgrade an Angular 1 service to make it available in Angular 2 entity. ajs-upgraded-providers.ts Copy paste code.
• #69: We are getting close people!
• #70: Again start at the leaves. In this case study i started at the card and spinner components. Very similar to the services method we just migrate them to Angular 2 and then downgrade so they can be used in Angular 1.
• #71: Then it’s just the grind, slowly walking up the tree. Migrating them to Angular 2 and the downgrading them to be used in Angular 1. Most of the issues you’ll face are just about dependancies that you can’t control. Re-write Find Upgrade Most of the time you’ll want to opt for the second two, since the goal is to get rid of Angular 1.
• #73: DEMO Start with spinner It’s the simplest - show step 7 Show how it’s used with inputs Show bindings. Show it’s using another 3rd party module called ui-spinner Step 8 @Component Bindings -> Inputs Template, show how you now use Angular 2 syntax since it’s an Angular 2 component. downguadecomponent (Notice the bindings.) Tip! - Show how the bindings are named Angular 2 style. Still need to have [] despite being used in an Angular 1 component and STILL need to be snake-case Spinner! Same problem as the toaster. Upgrade Rewrite Look for another 3rd party module. This time i went for a re-write, not the best but essentially using the same underlying library called spin.js to load the spinner. Won’t go into depth you can look at the code and compare the branches yourself to see the changes. EditComponent - 8 -> 9 Show step-8 in the EditComponent - Old Code Show step-9 in the EditComponent - New Code Routing is the last thing we can migrate only until we have migrated everything else to Angular 2 can we even think about migrating the router to the Angular 2 router. So we have no option but to continue using the uiRouter service, but i’ve shown you how to handle this already - we simply upgrade them. Then we can use these Angular 1 services inside Angular 2
• #74: Ok so we are there now
• #75: I can’t figure out how to easily break this up into small steps, so I call this the tiny pop. NOT big bang.
• #76: Swap out ui-router <> Angular 2 Router Add a root component
• #78: TIP: If you have been using multiple named ui-views in your ui-router based application you can do the same with Angular 2 and multiple named router outlets, but depending on your use case might need some masaging.
• #79: STEP-12 We replace the ui-router with the Angular router. Since we re-write the ui-router to use component this should be fairly simple. Angular 2 has a root component, we add the code that used to be in index.html into that component and we make it hold the router outlets and the new router directives.
• #80: Find solutions to all the upgraded Angular 1 entities that you used. For my demo app it’s actually the Toaster which we upgraded, in the end I found an Angular 2 one on the internet. Basically remove all the old code. Make sure you remove all the code referring to Angular 1 otherwise your build tools might pull that code it and bundle it with yours. Now you are running a fun Angular 2 application! Remove AngularJS which means Replacing remove final set of upgraded ng1 services/components (toaster)