Upgrading AngularJS Apps
https://github.com/reidsvilleneuve/
Planning
Don't jump into this blindly!
Context
Where are you now?
- Build Process?
- Module loader, if any?
- Developer resources?
- Business interest?
Goal
Where do you want to be?
- TypeScript / Dart / ES6? ES5??? ಠ_ಠ
- Angular CLI?
- Async/Await or embrace Observables?
- Gloat that you upgraded?
First Steps
Set yourself up for success
Immediate code considerations
Get the latest version of AngularJS
Side-by-side: AngularJS and Angular components
They are very syntactically similar so can help with the upgrade.
angular.module('veryComplicatedApp')
.component('appDoSomeMath', function () {
return {
template: '{{ $ctrl.num }} + 1 = {{ $ctrl.addedNum }}
',
bindings: {
num: '@'
},
controller: doSomeMath
};
function doSomeMath () {
this.$onInit = function () {
this.addedNum = this.num + 1;
}
}
});
@Component({
selector: 'app-do-some-math',
template: '{{ num }} + 1 = {{ addedNum }}
'
})
export class DoSomeMathComponent {
@input() numberToAddOneTo: Number;
ngOnInit () {
this.addedNumber = this.numberToAddOneTo + 1;
}
}
JavaScript to TypeScript
DEMO: JavaScript to TypeScript
This will be super-duper complicated
You have no idea what I am about to do.Build Process
Consider the "Planning" step and figure out your build process
If you have no idea where to start with this, consider this exercise: "If I just mass-converted to typescript, where could I fit the typescript compilation step in there with what I have?"Start using a module loader
Webpack is pretty "in" right now, and for good reason.
It's also what the Angular CLI uses, so keep that in mind if you would like to eventually start using it.ngUpgrade!
The Angular team has your back!Incrementally upgrade your app by simultaneously loading both frameworks.
Upgrading / Downgrading
Upgrade: AngularJS to Angular
e.g. an AngularJS service consumed by an Angular component. You are "upgrading" the AngularJS service to be compatible with the Angular consumer.Downgrade: Angular to AngularJS
e.g. an Angular component within an AngularJS module. You are "downgrading" the Angular component to be compatible with the AngularJS module.
@Component({
selector: 'app-do-some-math',
template: '{{ num }} + 1 = {{ addedNum }}
'
})
export class DoSomeMathComponent {
@input() numberToAddOneTo: Number;
ngOnInit () {
this.addedNumber = this.numberToAddOneTo + 1;
}
}
///////////////////
import { DoSomeMathComponent } from './do-some-math.component';
import { downgradeComponent } from '@angular/upgrade/static';
angular.module('veryComplicatedApp')
.component(
'appDoSomeMath',
downgradeComponent({ component: DoSomeMathComponent }) as angular.IDirectiveFactory
);
Remember to add the component to your module's declarations array.
Other considerations
In the spirit of BrieBug CEO Jessie's original "Transitioning to Angular 2" series, we will go over a few more things in the...
DEMO: Converting John Papa's Hot Towel
See the video here.DEMO: Converting John Papa's Hot Towel
Where are we now?
- Very functional (and massive) gulpfile
- 'vet' gulp task can no longer be valid
- Should we include gulp-typescript or run tsc?
- Pretty good amount of abstraction in common pain points (e.g. routerHelper)
DEMO: Converting John Papa's Hot Towel
Where do we want to be?
- Aim to be as close to the guide as possible
- Remove gulp as the build driver (Angular CLI as a replacement)
- Gloat that we upgraded!
DEMO: Converting John Papa's Hot Towel
A look at an in-progress upgrade
- Right after JS to TS conversion
- Angular service being used by an Angular component
- Angular component nested within AngularJS directives
DEMO: Converting John Papa's Hot Towel
Gotchas
- Pay attention to version numbers and their corresponding documentation!
- systemjs-angular-loader.js - This is in the Quickstart project that is linked in the guide, and it must be downloaded if approaching the Angular installation this way.
- The guide-provided tsconfig.json required some tweaking