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
%
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
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
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
📣 This is Slido interaction slide, please don't delete it.✅ Click on 'Present with Slido' and the poll will launch automatically when you get to this slide.