What’s new in Angular 17

Angular version 17 was released recently, and this application sounds like an hour of rebirth for the framework, which dates back to September 2016.

A new Branding

After a few days where the Angular logo had disappeared, replaced by a question mark on social networks such as X to name but the most famous, on Monday November 6, the Angular team announced a new Logo but also a brand new documentation site available here.

This brand-new site (still under construction in terms of APIs) brings many improvements, such as:
the ability to experiment with features in a sandbox
new tutorials with the option of creating them in a sandbox
a brand-new organisation by theme (component, form, accessibility, best practices, etc.).

The @Component annotation

The @Component annotation has been improved. Since the beginning of Angular, it has been mandatory to pass a style array or an array of relative stylesheet paths to bind style to our components.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

The new Application builder

Angular has always had different builders to build our applications. There are two main types of Angular application:

client-side rendering: the entire application is built client-side. In other words, the application is represented in DOM (Document Object Model) format. Navigation, data fetching and templating are managed client-side instead of server-side.
server side rendering: the application is rendered in HTML format, each page of the application is rendered in HTML format in response to navigation, and then this page is rehydrated to make it dynamic.

Depending on the type of application, the builder was different. Angular used the builder:

@angular-devkit/build-angular:browser to build a client-side rendering application
@nguniversal/builders:ssr-dev-server to build a server-side rendering application.

With the arrival of Angular 16, a new experimental builder has appeared: @angular-devkit/build-angular:browser-esbuild. This builder made it possible to use vite for the dev-server and esbuild for the build, and offered outstanding performance:

87% gain on an application build
82% gain on a dev-server of the application

However, the builder for server rendering had not changed. With the arrival of Angular 17, a brand-new “generic” builder has appeared. This builder allows you to build both a client-side rendering application and a server-side rendering application.