Introduction
Angular version 17 was released on November 8, 2023, and this application sounds like an hour of rebirth for the framework, which dates back to September 2016.
First and foremost, while we're talking about rebirths, we're not talking about a complete rewrite of the framework. We're talking about adding major functionalities that use the latest browser features and make the framework even more powerful.
The questions that remain are: How is this release a major turning point for Angular? What makes this release so exceptional?
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 organization by theme (component, form, accessibility, best practices, etc.).
Don't hesitate to give it a try, and report any questions or errors you come across.
The @Component annotation
The @Component anotation 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 {}
In general, a view is linked to a style sheet.
- a new property is introduced: styleUrl
- the styles property takes as its value a string or an array of strings
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './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.
A round of applause for the builder:
@angular-devkit/build-angular:application
For existing applications using the builder: @angular-devkit/build-angular:browser-esbuild, migration to the new builder is relatively straightforward.
For server-side rendering applications, migration is a little more complex due to the number of properties to be changed.
The new Angular Code Flow
The release of Angular 17 also sees the arrival of a new, more powerful flow code.
In previous versions, we used structural directives ngIf, ngSwitch, ngFor to manage the structure of our page.
Structural directives are very powerful, thanks to the mycrosyntax of which they are composed. Unfortunately, this mycrosyntax has its limits, and so a new flow code was created.
What does this code flow look like?
@Component({
standalone: true,
selector: 'app-root',
template: `
@if(name === 'SFEIR'){
<ul>
@for(entity of entities; track entity.id) {
<li>{{ entity.name }}</li>
}@empty {
No data
}
</ul>
}@else {
Name not correct
}
`
})
export class AppComponent {
name = 'SFEIR';
entities = [{ name: 'Luxembourg', id: 'LU' }];
}
As the code shows, there's no need to import the ngIf and ngFor directives. This new code flow is build-in to Angular and will enable simpler integration of components based on Angular signals.
Structural directives are not deprecated and there are no plans to make them deprecated.
In future, only the ngIf, ngFor and ngSwitch directives are likely to be deprecated.
If you want to automatically migrate your components to the new code flow, this schematic will be your best friend
ng g @angular/core:control-flow
Warning: This new flow code is very recent, so you may encounter some formatting problems. (prettier 3.1 now supports this code flow)
IDEs:
- VsCode with Angular Language Service plugins already supports syntax highlighting
- Webstorm EAP also supports syntax highlighting. Unfortunately, template checking is not yet supported, but will be shortly.
The most waited feature: defer
Probably one of the most important features of this release. The ability to lazyload our components easily.
Of course, we could do this before. Thanks to EsModules and the *ngComponentOutlet structural directive, it was possible to lazyload our components. However, this technique remains a source of error, in the sense that the developer has to think about the whole loading process (loading, error, etc.) and is limited in scope (complicated prefetching, etc.). In short, the developer experience wasn't there.
With Angular 17, defer comes to the rescue, making it easy to lazyload our components by taking into account all the stages of lazyloading.
@Component({
selector: 'app-root',
template: `
<button type="button" #loadButton>Click Me</button>
@defer(on interaction(loadButton)) {
<app-lazy-component />
}@placeholder {
showed until the chunk file not begin to load
}@loading {
showed during the loading of the chunk
}@error {
showed if an error happen during loading
}
`
})
export class AppComponent {}
There are many other options for defer, placeholder, loading. To get the most out of this feature, I recommend Tomas Trajan's fabulous article here.
Like all good things, you mustn't abuse it. Depending on your needs, defer should be applied in certain ways. As a general rule, defer will depend mainly on your network and the size of the component to be lazyloaded. Last but not least, this feature will be invaluable for optimizing Core Web Vitals' LCP and CLS metrics.
A little word about Signals
Signal was released as a developer preview with Angular 16. With Angular 17, Signal is stable and can be used.
Combined with the ChangeDetection.OnPush option, you'll operate a very precise reactivity, allowing you to refresh only the component whose signal has been modified.
The mutate method on signals is no longer available.
Effects are still in developer preview.
Angular Devtools
Angular Devtools has also been given a very nice little feature 😄 it's now possible to view the injection tree. Very useful for debugging your application when you have circular dependencies, or when a token isn't resolved correctly.
Conclusion
Angular 17 really does bring a lot of new features, and it's in this sense that we're talking about an Angular reborn. Angular 17, like all previous releases, brings no breaking changes, so it's very easy to migrate an application from Angular 16 to Angular 17.
You don't have to use all these new features; they're available for developers to try out.
Top comments (5)
Great to read! ✨ Thanks a lot for keeping us up-to-date. 🎉
Quick notes - small typos:
"A little word about Siggnals" -> Signals
"Combined with the ChnageDetection.OnPush option" -> ChangeDetection
Once again, great work!
Thanks a lot for the feedback, typos are fixed now :)
Angular 16 is easy to pick up and Angular 17 simplify it further,honestly i love Angular and it's out of the box features in frontend software development,thanks for the update
Hi Nicolas Frizzarin,
Your article is very cool
Thanks for sharing
nice post!
typo: anotation -> annotation