A Developer's Tale: Migrating an Angular app from version 10 to 18

Embark on a real-world journey of transitioning the Devoxx CFP application from Angular 10 to Angular 18. This talk offers a deep dive into the practical challenges and solutions encountered during this significant upgrade process.
The session begins by highlighting the compelling reasons for migration, including Angular 18's advanced features and performance benefits. It then moves into the heart of the upgrade, sharing first-hand experiences from updating the Devoxx CFP app. Attendees will learn about navigating through breaking changes, adapting to new libraries, and tackling compatibility issues - all illustrated with real scenarios from the Devoxx CFP app upgrade.
Crucial aspects such as handling deprecated APIs, managing library dependencies, and employing new Angular 18 capabilities will be covered. The talk aims to provide a clear roadmap for similar migrations, outlining the traps and hiccups that might arise and how to skillfully overcome them.
Practical tips and strategies will be a cornerstone of this presentation, giving developers the tools to efficiently migrate their applications to the latest Angular version. This session is not just theory; it's a collection of valuable lessons and best practices drawn from a real-world application upgrade.

Transcript

1. Migrating an Angular app from version 10 to 18 Loïc Magnette A Developer's Tale
3. Loïc Magnette Proud Dad @LoMagnette Dev Senior lmagnette BeJUG co-organizer lmagnette
5. update.angular.io
6. update.angular.io
13. Schematics
14. Schematics
15. -- Schematics
16. -- new generate … add update NG Schematics
17. -- Schematics NG UPDATE
22. Dependencies
23. Dependencies
26. Dependencies
31. API Migration
32. Dependencies
33. --force
38. Tests
39. Rewrite
53. Dedupe Dependency A @1.0.0 Dependency B @2.0.0 Dependency C @1.4.0 Dependency D @1.0.3 Dependency D @1.0.10
54. Dedupe Dependency A @1.0.0 Dependency B @2.0.0 Dependency C @1.4.0 Dependency D @1.0.3 Dependency D @1.0.10
55. Dedupe Dependency A @1.0.0 Dependency B @2.0.0 Dependency C @1.4.0 Dependency D @1.0.10
58. Styling
61. Linter
62. Linter
63. Linter
64. Linter ng add @angular-eslint/schematics
65. Linter ng g @angular-eslint/schematics:convert-tslint-to-eslint
71. Todo’s
72. -- - Standalone components - Inputs binding - New control flow - Signals Todo’s
73. -- - Standalone components - Inputs binding - New control flow - Signals Todo’s
79. Tools
80. Dependabot Renovate Tools
81. A. Nonymous Tools
83. One version at the time
84. Automated tests
85. Plan the upgrade
87. SLIDES lmagnette lmagnette www.oniryx.be @LoMagnette