Angular 17 an Overview

Nov. 8, 2023 saw the introduction of Angular version 17 bringing some new improvements, and new features, as well as some breaking changes and deprecations.

The following are the most significant updates:

1. New lifecycle hooks

   The series of steps that take place between a component's formation and destruction is known as its lifecycle. Angular uses steps to render components and periodically check for updates. Each step represents a distinct stage in this process.

   Angular 17 introduces 2 new lifecycle hooks. These represents a substantial enhancement over existing lifecycle hooks, such as ngAfterViewInit, which trigger after a component has been initialized but before any DOM updates have occurred. This can pose challenges when working with the DOM in ngAfterViewInit, as one often needs to await DOM updates before interacting with them. The afterRender and afterNextRender hooks, however, guarantee execution after DOM updates, rendering them ideal for DOM-related tasks like invoking third-party libraries or direct DOM manipulation.

   i. afterNextRender:- Executes once and is similar to AfterViewInit but it does not execute in server-side rendering (SSR). So that makes this event perfect for any initialization code that you need in your app, for example any third-party libraries, or browser-only APIs (for example initializing ResizeObserver API).

   ii. afterRender:- Executes after every change detection. This is perfect to update the DOM every time Angular detects a change. You could use it to make additional writes to (or reads from) the DOM based on an app update.

2. ESBuild

   ESBuild is a blazing-fast JavaScript bundler built for the modern web. Compared to the previously used Webpack, ESBuild has several advantages:

   • Speed : 87% faster builds for hybrid rendering and 67% faster for client-side rendering in Angular 17. This translates to shorter development cycles and improved developer productivity.

   • Memory consumption: ESBuild is much lighter on memory, making it well-suited for resource-constrained machines and low-powered devices.

   • Parallelism: ESBuild utilizes multi-core processing effectively, further accelerating build times.

   • Simplicity: ESBuild has a much simpler configuration compared to Webpack, making it easier to use and maintain.

   • JavaScript, CSS, TypeScript, and JSX built-in

   • Tree shaking, minification, and source maps.

3. Server-side rendering (SSR)
   Server-side rendering (SSR) is a process that involves rendering pages on the server, resulting in initial HTML content which contains initial page state. Once the HTML content is delivered to a browser, Angular initializes the application and utilizes the data contained within the HTML.

   Server-Side Rendering involves rendering web pages on the server and sending fully rendered HTML to the client’s browser. This contrasts with traditional client-side rendering, where the browser fetches raw HTML and JavaScript, then constructs the DOM (Document Object Model) and renders the page.

   Benfits of SSR

   1. Improved SEO

   2. Faster initial page loads

   3. Better support for users with slow internet connections or disabled JavaScript

   4. Enhanced Crawlability and Indexing - SSR architecture assists search engine bots to efficiently crawl website content, enhancing its visibility on search engine results pages. By pre-rendering HTML content server-side, the site becomes more accessible and SEO-friendly, improving its chances of higher indexing.

4. Dependency Injection Debugging in DevTools

   Angular 17 now has the ability to explore the structure of Injectors configured in your application using the injector tree in development mode.

   The injector hierarchy can be explored using the environment hierarchy (application-level DI) and elemental hierarchy(component-level DI).

5. Other Major Changes in v17.

   a. Node.js Version Requirement: Angular v17 now requires Node.js version v18.13 or newer. You need to ensure that the development environment meets this minimum version requirement to work with Angular v17 effectively.

   b. TypeScript Version Requirement: Angular v17 no longer supports TypeScript versions older than 5.2. you must upgrade to TypeScript 5.2 or later to align with the requirements of Angular v17.

   c. Strict NgSwitch Check: The NgSwitch directive in Angular v17 now defaults to the strict equality operator (===) instead of the loose equality operator (==). This change may require you to adjust NgSwitch expressions or individual condition values to adapt with the stricter equality check.

   d. Routes with LoadComponent Data Inheritance: If you want to inherit parent data in child routes then you must update the strategy to always.