angular-sydney meetup presentation about using the angular 2 upgrade adapter to migrate from angular 1 to angular 2... Github code examples to be posted on Friday.

1. Whoami?
• Tony May @_tonymay
• Founded my own agency to act as a technical co-
founder for startups (Primary stack ng1 + ng-
material + ionic)
• Some corporate consulting Like William Hill (a
crazy hybrid 50% iOS + 50% ionic = 110%
awesome)
• Currently working at identitii – startup working
on blockchain (Ethereum) POCs for
correspondent banks (Ng1/2 + Ng Material, Node
& Golang)

2. From Ng1 to Ng2 (and beyond)
• Step 1: Javascript -> Typescript
• Step 2: Grunt/Gulp -> Webpack
• Step 3: Ng2 Bootstrapping
• Step 4: Decide on Strategy
(inside out vs outside in)
• Step 5: Optimise + Minimise

3. A note on comparisons
False dichotomy: a logical fallacy which involves
presenting two opposing views, options or
outcomes in such a way that they seem to be
the only possibilities: that is, if one is true, the
other must be false, or, more typically, if you do
not accept one then the other must be
accepted. The reality in most cases is that there
are many in-between or other alternative
options, not just two mutually exclusive ones.

4. From Ng1 to Ng2 (and beyond)
• Step 1: Javascript -> Typescript
• Step 2: Grunt/Gulp -> Webpack
• Step 3: Ng2 Bootstrapping
• Step 4: Decide on Strategy
(inside out vs outside in)
• Step 5: Optimise + Minimise

5. Steps to implement
• tsconfig
• npm
• typings for existing
dependencies
• choose your output
directory
• rename *.js -> *.ts
• sudo rm -rf /
Step 1: Javascript -> Typescript
Why: It’s a SUPERset ;-) of javascript
Why: Interfaces are awesome (refactor like a boss)

7. To ng2 (beyond)
• Step 1: Javascript -> Typescript
• Step 2: Grunt/Gulp -> Webpack
• Step 3: Ng2 Bootstrapping
• Step 4: Decide on Strategy
(inside out vs outside in)
• Step 5: Optimise + Minimise

8. Primarily: A different philosophy
Angular
• .config()
• .decorate()
• .$broadcast
Angular 2
• Pre-compile via packager
• Pre-compile via packager
• RXJS LIKE A BOSS!
Step 2: Bower -> Npm
Why: does everything bower does + more
Why: Seems like everyone is now on-board the npm train

9. Build Pipeline
Angular
1. Packages: Bower
2. Build: Grunt/Gulp
3. Javascript
4. JSLint
5. Write Code
6. Package
7. Optimise/Minimise
Angular 2
1. Packages: Npm
2. Build: Webpack
3. Typescript
4. Typings
5. Package/Transpile
6. Write Code
7. Optimise/Minimise

11. From Ng1 to Ng2 (and beyond)
• Step 1: Javascript -> Typescript
• Step 2: Grunt/Gulp -> Webpack
• Step 3: Ng2 Bootstrapping
• Step 4: Decide on Strategy
(inside out vs outside in)
• Step 5: Optimise + Minimise

13. Angular1 with Angular2 Angular2 with Angular1

14. Summary
• ForwardRef is necessary, and you will have a
big pita if you try and use export with the
Upgrade Adapter
• The debugging is sometimes tricky, especially
when you have multiple frameworks nested
• The Ng1 & Ng2 types are IN THE METHOD
NAME!!
• app(‘main’).factory(‘blah’,
downgradeNg2Provider(Ng2Provider))

15. To ng2 (beyond)
• Step 1: Javascript -> Typescript
• Step 2: Grunt/Gulp -> Webpack
• Step 3: Ng2 Bootstrapping
• Step 4: Decide on Strategy
(inside out vs outside in)
• Step 5: Optimise + Minimise

16. I Can Has?
• Ng1 with Ng2 children? Yes
• Ng2 with Ng1 children? Yes
• Ng1 with Ng2 children, with Ng1 children?
Probably not
• Ng2 with Ng1 children, with Ng2 children?
Probably not
• $broadcast? Hell no, use observables!! 

17. Main
Component
(w router)
Search View Detail View
Button
Predictive
Search
Menu
Hero
Provider
Example Application Structure

18. Main
Component
(w router)
Search View Detail View
Button
Predictive
Search
Menu
Hero
Provider
Outside In Upgrade
2
3
1

19. Main
Component
(w router)
Search View Detail View
Button
Predictive
Search
Menu
Hero
Provider
Inside Out Upgrade
32
1

20. Mistakes, I had had my few
• Tried outside in to start, with my angular material
Ng1 app, OMG, DO NOT DO THIS. When I first
tried this, it was not rendering, not giving a
console message, so I had use the force to debug
• Didn’t know about observables so I implemented
ng-redux to replace a component that relied on
$rootScope.$broadcast :-P and had to change
everything back once I worked out observables
• Thinking you could just “drop in” Angular 1
components, I wish it was that simple.

21. To Ng2 (and beyond)
• Step 1: Javascript -> Typescript
• Step 2: Grunt/Gulp -> Webpack
• Step 3: Ng2 Bootstrapping
• Step 4: Decide on Strategy
(inside out vs outside in)
• Step 5: Optimise + Minimise

22. Out of TIME!
• Basically, the new html syntax can have some issues with webpack 2 beta
gulification, uguficaltoin, uglification. I’ve found that webpack 1 is
currently better because you get a smaller bundle size, and better
transpile support (espeically if you use Google Closure Compilier)
• You get the best result if you cherry pick the includes, (e.g.
// Only import the rxjs bits that you need
import 'rxjs/Observable’;
import 'rxjs/add/operator/toPromise’;
import 'rxjs/add/operator/map’;
import 'rxjs/Subject’;
import 'rxjs/BehaviorSubject’;
) then rely on the CommonsChunk webpack plugin to… well..
chunk the common libraries.
• Final size is super important, imho you will need to include Ng2+Rx
(~140kB min+compress) Ng1 (~50kB min+compress) + other libraries so
you need to get the final bundle as small as possible.
• I’ll post some code examples of each step on github, on Friday!
• Join the telegram group, I’m happy to answer any questions you have!
https://telegram.me/joinchat/DhJ-lgmRdB-mkBh5Nk6GHQ