Upgrading to Angular 18 with Jorge Cano
Summary of episode #38 of the Angularidades podcast
Listen to the entire conversation in Spanish with Jorge Cano on Spotify, YouTube, and other podcast platforms.
In this episode of Angularidades, Jorge Cano returns from episodes #13 and #30 to explore the new features of the upcoming major Angular version with Alejandro Cuba Ruiz. Jorge is a software architect and principal web engineer from Buenos Aires, Argentina. He is recognized for his contributions to the Angular and web technologies communities, holding distinctions as a Google Developer Expert in both areas, as well as being an Nx Champion and NativeScript Developer Expert.
Experimental zoneless and hybrid change detection
We started the conversation discussing the transition to a zoneless architecture and highlighting the performance enhancements achieved by removing the dependency on the Zone.js library. Learn more details about how the underlying change detection mechanism works from Enea Jahollari's article with explanatory diagrams. Additionally, to understand the maintained hybrid system that supports both zoneful and zoneless approaches, consider Matthieu Riegler’s analysis of hybrid scheduling.
Features graduating from Developer Preview
Some elements introduced in 17.x versions and currently in Developer Preview are expected to transition to stable mode. After extensive testing within Google's internal applications and months of feedback received from their adoption in external apps, features such as signals inputs, model inputs, the function-based output, parts of RxJS Interop package, deferrable views, and the built-in control flow are likely to become stable very soon.
Fallback HTML in content projection
We also explored the <ng-content> enhancement released in 18.0.0-next.2. This update allows developers to define fallback content that Angular will use if no content is projected from a parent component. It gracefully handles empty states, minimizing sub-optimal rendering situations in component templates developed by teams with communication gaps. Check Netanel Basal's post for an illustrative code example.
Hydrated i18n blocks in SSR mode
We strongly welcome Angular's ongoing efforts to support internationalization. The recent experimental updates allow i18n blocks to hydrate by providing the experimental provideClientHydration(withI18nSupport()), introduced in 18.0.0.-next.3, enhancing performance and UX on multilingual apps leveraging server-side rendering.
Adoption of the event delegation system from Wiz
The recent collaboration between Angular and Wiz brings the event delegation system from Wiz to enhance the existing event handling capabilities of Angular applications. The new approach significantly optimizes event management by reducing the overhead from bubbling thanks to the JSAction library, making it particularly beneficial for efficient SSR hydration and large-scale apps with complex interactions.
Compatibility Limited to TypeScript 5.4
Angular 18 narrows its TypeScript compatibility exclusively to version 5.4, phasing out older versions. We discussed the benefits of adopting some of the latest TypeScript features, such as the smarter type narrowing, the introduction of the NoInfer utility type to selectively prevent incorrect inference of type arguments in generic functions, and the new Object.groupBy and Map.groupBy methods to simplify logic. Jorge also celebrated improvements in TypeScript module resolution. For more insights and code examples, read the TypeScript 5.4 release notes.
Revamped official documentation
The official documentation is shifting from angular.io to angular.dev, currently in beta until the release of Angular 18.0.0. This new platform has a beautifully crafted UI and navigation. However, it lacks internationalization support, which is important for onboarding the non-English-speaking Angular community. Jorge cites the example of a Japanese Angular developer who was the first to add translated content to the existing Angular docs, noting that such translations won’t be immediately available following the Angular 18 release.
Takeaways from the Angularidades episode
- Shifting to a zone-less architecture speeds up change detection and overall application performance.
- Maintaining a clean architecture and using the Facade design pattern facilitates migrations and code refactoring.
- Testing the migration to Angular 18 on a smaller scale before implementing it in a large project is highly advised to identify and address potential blockers.
- The focus on internationalization in server-side rendering enables Angular 18 applications to support multiple languages more performantly.
- Learning English is essential for accessing the newest Angular docs platform — which currently lacks i18n support — and staying current with the latest trends in the software development industry.
- The Angular community’s feedback is essential in shaping the direction and development of new features within the framework.
Stay tuned and check out who is getting interviewed for future episode releases at https://twitter.com/angularidades or LinkedIn.
