Upgrade to Angular

change can be a good thing

Vitor Fernandes

github.com/vmlf01

Toptal Developer at

KWAN: Love, Respect & Community

Angular PT organizer

Angular

Node.js

.Net

Current state

AngularJS 1.7 will be last version released for 1.x.

On July 1, 2018 it will enter a 3 year Long Term Support period with only security fixes or fixes for issues that cause the framework to stop working.

If your application works now, it will continue to work in the future.

3 years is still a long time!

Upgrade considerations

• Performance

• Features

• Ecosystem

• Maintainability

• Workforce availability

After all that, say we decide to upgrade...

Upgrade strategies

Big Bang

vs

Incremental

Usually only Incremental

is possible because of business constraints

ngUpgrade

• run both frameworks side-by-side during transition period

• improve developer skills/familiarity with new framework and tools

• keep releasing new features

ngUpgrade

• UpgradeModule bridges framework bindings
• Hybrid applications with both AngularJS and Angular
• Every DOM element is owned by one framework only

Angular

AngularJS

AngularJS

Angular

ngUpgrade features

• Angular components in AngularJS template
• AngularJS components in Angular template
• Change Detection across Angular and AngularJS parts
• Interoperable Dependency Injection for services

Upgrade phases

1. Preparation

2. Upgrade

3. Migration

Preparation

• Update codebase style
  • Follow AngularJS style guide
  • Use Components
  • Use Life-cycle hooks
  • ES2015 Classes and Modules
  • Explicit application bootstrap instead of ng-app
• Upgrade dependencies
  • make sure everything works before upgrading to Angular
• Update build process
  • Webpack, npm packages, TypeScript (ideally)

Upgrade

• Include Angular and UpgradeModule

• Update build configurations

• Replace AngularJS bootstrap with Angular bootstrap

• Bootstrap AngularJS using UpgradeModule

Migration

• Vertical Slicing

  • Migrate one route/page at a time

• Leaf Picking

  • Migrate stateless components

  • Migrate services with few dependencies

  • Work your way to more complex parts

Upgrading is a transition and should be as short as possible

Upgrade

Sample

Demo

Let's take a sample AngularJS application and see how we can upgrade it!

• Uses Gulp for build scripts
• Uses Babel to transpile source files
• Uses Browserify to bundle scripts

https://github.com/gothinkster/angularjs-realworld-example-app

Build configuration

• Angular-cli doesn't support custom configurations or additional plugins and CLI version 6 doesn't support eject

• We can use Angular-cli 1.7.4 to generate and eject a base configuration

• Needed for ng-annotate or ngtemplate-loader for example

Demo

Upgrade roadmap:

1. Use existing build process
2. Generate a new Angular app using CLI
3. Copy AngularJS source files into new Angular app
4. Adjust AngularJS build script
5. Keep both build scripts running in parallel
6. Bootstrap AngularJS app using UpgradeModule

git checkout -f step-1

https://github.com/vmlf01/ng-realworld-upgrade

Demo

Migrating a service:

1. Generate new service
2. Copy service code from AngularJS file
3. Adjust service code keeping public interface
4. Use @Inject() to inject AngularJS dependencies
5. Provide service dependencies to Angular
   
6. Downgrade migrated service to AngularJS
   
7. Remove Service registration from AngularJS
   

git checkout -f step-2

https://github.com/vmlf01/ng-realworld-upgrade

Demo

Migrating a component:

1. Generate new component
2. Copy component code from AngularJS files
3. Adjust component view with new Angular syntax
4. Use @Inject() to inject AngularJS dependencies
5. Use @Directive to upgrade other used components to Angular
6. Add component to module entryComponents
7. Downgrade migrated component to AngularJS
8. Update route definition to use downgraded component

git checkout -f step-3

https://github.com/vmlf01/ng-realworld-upgrade

Demo

Pitfalls:

• Attribute directives cannot be upgraded or downgraded
• Filters cannot be upgraded
• Pipes cannot be downgraded

Each element is owned by one framework only, so you cannot mix frameworks in same element

Demo

Pitfalls:

• Angular components in AngularJS template
  • bindings are set using Angular style
  • binding names use AngularJS kebab-style
• AngularJS components in Angular template
  • bindings are set using Angular style
  • binding names use Angular camelCase style

Demo

Migrating a route:

1. Create a root component for <router-outlet>
2. Setup app routes for Angular Router
3. Setup Url handling strategy to mark which routes should be handled by Angular Router
4. Use empty template in ui-router for routes handled by Angular Router
5. Update bootstrap sequence to initialize both AngularJS and Angular apps

git checkout -f step-4

https://github.com/vmlf01/ng-realworld-upgrade

• https://angular.io/guide/upgrade

• https://angular-2-training-book.rangle.io/handout/migrate/

• https://blog.nrwl.io/ngupgrade-in-depth-436a52298a00

• https://blog.thoughtram.io/angular/2015/10/24/upgrading-apps-to-angular-2-using-ngupgrade.html

• https://vsavkin.com/migrating-angular-1-applications-to-angular-2-in-5-simple-steps-40621800a25b

• https://blog.nrwl.io/upgrading-angular-applications-managing-routers-and-url-ca5588290aaa

• https://www.youtube.com/watch?v=kWKiY8CWzbs