Angular 17

Angular celebrates its thirteenth anniversary (13 years since Angular.JS 🎉) with a new look, a new documentation website and an exciting set of innovative features for version 17 that set new standards for performance and development experience.

Last week, the Angular team released Angular 17 and wrote a very detailed post about what’s new in Angular 17 where you can find all the details

New look, new logo

Angular’s logo has been the same since they released the “modern” version of the framework a bunch of years ago. Since then it has changed a lot, both inside and out, but its image has not changed.

For this reason, in this version, they wanted to reflect that evolution by releasing a new logo, where the classic “A” that identifies it becomes a negative logo or negative spaces: the shapes that surround it make you see the “A” in the white space.

More modern and prettier, but it reflects a big change between all these versions, which is what they were looking for.

New default tooling

Angular has announced that Vite and esbuild will be the default options when creating new projects. These tools make the ng serve and ng build commands more powerful and faster.

Since their introduction in version 16 as a developer preview, many have already experimented with this, reporting improvements of up to 67% in build time for some applications. Now, this new app build experience is out of preview and enabled by default for all new apps.

In addition, the build pipeline has been updated to use hybrid rendering (see below for news on this), which may result in a speed improvement of up to 87% in ng build and an 80% faster edit and update cycle for ng serve.

Schematics (Angular’s own template-based code generators) are planned to be released in a future minor release (before 18, come on), to automatically migrate existing projects that use hybrid rendering (client-side rendering with SSG or SSR).

New dependency injection debugging capabilities are also included in Angular DevTools.

Deferrable views

Angular has developed a new deferred loading mechanism that improves the speed of applications. This mechanism, called “deferrable views”, allows to load components and all their transitive dependencies in a lazy way with a single line of declarative code.

All this is done through a compile-time transformation: Angular abstracts all the complexity of finding components, directives and pipes used within an @defer block, dynamically generating imports and managing the process of loading and switching between states.

In addition, Angular makes it easy to use JavaScript Intersection observers by simply adding a deferrable view trigger.

This functionality is still in a “preview” state in Angular 17, but they believe it is actually robust and usable. The reason for leaving it in this pre-production state is, according to them, that they want to get more feedback from developers and thus be able to introduce possible changes that would become final in the next release. So, in practice, it means that it is a robust functionality but the way to use it could change until Angular 18 next year.

Integrated flow control

To improve the developer experience, Angular has released a new block template syntax that offers powerful features with simple, declarative APIs. This new syntax allows for streamlined and more efficient control flow.

Many developers have traditionally struggled with *ngIf, *ngSwitch, and *ngFor, so a new integrated control flow has been developed that offers:

1. A more ergonomic syntax closer to JavaScript, requiring fewer documentation queries.
2. Better type checking thanks to more optimal type inference.
3. This is a concept that exists primarily at compile time, which reduces the runtime footprint and could reduce the size of the final package by up to 30kb, further improving your app’s Core Web Vitals scores.
4. Improves performance by up to 90%.
5. It is automatically available in the templates, without additional imports.

Hybrid rendering

Angular has improved the hybrid rendering experience by bringing server-side rendering (SSR) and static site generation (SSG or prerendering) closer to developers with a new flag in ng new.

It includes support for component “hydration” and deployment on serverless platforms such as Firebase (from Google) or CloudFlare.

“Hydration” refers to the process of taking server-side rendered HTML (SSR) and linking it to Angular functionality on the client-side. This allows Angular applications to load quickly with initial static HTML, while Angular interactivity is “hydrated” in the background. Hydration in Angular can be destructive or non-destructive. The former involves replacing the existing DOM, while non-destructive preserves the existing DOM.

This change they have wanted to make for quite some time, but first they wanted to have confidence in the developer’s experience with Angular’s SSR.

You can enable SSR in new projects with ng new mi-app --ssr.

You can add hybrid rendering in an existing application with: ng add @angular/ssr.

Independent or “standalone” components

The main elements in Angular are the components. Traditionally, each component of an Angular app belongs to an NgModule that provides the dependencies. Already in a previous version, standalone components were introduced as a preview, but it is in Angular 17 when they become not only stable, but also the default option when creating projects. All ng generate commands will now generate standalone components, directives and pipes.

To achieve this, components, directives and pipes are marked as standalone: true.

Angular classes marked as standalone do not need to be declared in an NgModule. Standalone components specify their dependencies directly instead of getting them through NgModule.

These standalone components provide us with a simplified way to create applications, streamlining the creation of components by reducing the need for NgModule.

Although NgModule is maintained and can continue to be used, it is recommended to gradually migrate projects to these new standalone APIs due to their benefits. To ease this transition, a schema is provided that will automate most of this process: ng generate @angular/core:standalone

More

1. New utilities for schematics
2. Support for transforming component input values
3. Support for ECMAScript modules in server-side rendering (SSR)
4. Image optimization in HttpClient and image directive
5. Performance improvements on the order of 2.5x when building apps with Angular Materia