Angular Meetup Berlin (09.10.19) https://www.meetup.com/Angular-Meetup-Berlin/events/265176358/

1. sli.do
#NGBerlin

2. Migrating from an AngularJS
1.x app to an NG8 Mono-Repo
Architecture
By Cristhian Ferrufino
ferrufino@zertificon.com
@figuds

3. zertificon.com/jobs
WHO WE ARE
Located in Berlin-Neukölln
we develop IT security software since 2004.
Our developers work on new encryption
solutions for electronic communication.
90
COLLEAGUES
3
DOGS
21
NATIONALITIES
35
AVERAGE
AGE
100
INDEPENDENT
24
WOMEN
%

4. Join at
slido.com
#NGBerlin
Which version of Angular are you
using currently?

5. Why
migration
fails?
● Organisational reasons
● Third party dependencies

6. Organisational reasons
Really messy
legacy
Architecture
Legacy needs to
be moved first to
modern browser
standards
Rush to code
before
understand the
problem
Need to still
release features
depending on
Legacy Stack
legacy
feature A
migration
feature B
new
feature C

7. Bootstrap 2 + Legacy
Bootstrap 4 + Angular
Third Party Dependencies
What we probably
should do
EXAMPLE
Bootstrap 2 + Legacy
Bootstrap 2 + Angular
What people
normally do
EXAMPLE
Bootstrap 4 + Legacy
Bootstrap 4 + Angular
Or

8. ● Analysis
● Path
● Plan
How to
migrate
successfully

9. Analysis
● Analyze properly your AngularJS Application
● Understand the complexity of the migration
● Must re-write third party modules
What should
be done
Dive on the code directly
What we did
at this point

10. Path

12. Hybrid route with horizontal slicing

14. ngUpgrade with vertical slicing

16. 1.Migrate to Monorepo with
2. Create a workspace
npx create-nx-workspace@latest
<my_workspace>
3. Angular Project
ng g @nrwl/angular --defaults
ng g @nrwl/angular:application <my_app>
4. Route > Module > Component
On re-write we did
Plan
1. Style Guide
2. Typescript
3. AngularJS 1.5+
4. Component’ify
5. ES6’ify
6. Services to Angular
(third party modules: re-write or find)
7.Constant check on build for production
ng build <my_app> --prod --aot
In case of
ngUpgrade / Hybrid Route
we could do

17. Top Tips
● Do your in-house cleanup first and bring your application to modern browser
standards (Typescript or ES6)
● Analyze and estimate the cost and effort of migrate each branch of your
application
● If you decide for a migration keep a constant release cycle of the migrated
branches

18. Reference Links
● ngMigration Forum - github.com/angular/ngMigration-Forum/wiki
● Upgrading Angular Applications - leanpub.com/ngupgrade
● Bullet proof AngularJS migration using iframes -
medium.com/@jawache/bullet-proof-angularjs-migration

19. Thanks!