Skip to main content

Discover the latest features and enhancements in Angular 17

Angular-v17

 
Introduction

On November 8, 2023, Angular version 17 was unveiled, signifying a remarkable evolution for the framework that originated in September 2016. This release breathes new life into the application, presenting a fresh outlook and renewed potential.

It is important to clarify that rebirths do not imply a complete overhaul of the framework, but rather the incorporation of major functionalities that enhance its power using the latest browser features.


A new Branding


The Angular logo was absent from social media sites like X for a few days, and instead, a question mark was displayed. However, on November 6, the Angular team introduced a new logo and a brand new documentation website that can be found 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



Improvements have been made to the @Component annotation. Since the beginning of Angular, it has been necessary to include a style array or an array of relative stylesheet paths in order to apply styles to our components.

angular-17

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



The new Application builder


Angular has always had different builders to build our applications. There are two main types of Angular application:
  •  The application is constructed entirely on the client-side using client-side rendering. This means that the application is presented in the form of DOM (Document Object Model). Navigation, data retrieval, and templating are all managed on the client-side instead of the 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 updated 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.

Angular-17


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 still actively supported and there are no intentions to deprecate them.
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:

  1. VsCode with Angular Language Service plugins already supports syntax highlighting
  2. Webstorm EAP also supports syntax highlighting. Unfortunately, template checking is not yet supported, but will be shortly.


      3. The most waited feature: defer


      The capability to effortlessly lazyload our components is undeniably one of the most significant aspects of this release.

      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.


      Angular-17


      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.

      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.


      A small note on Signals


      Signal was initially launched as a developer preview alongside Angular 16. However, with the release of Angular 17, Signal has now reached a stable state and is ready for use.
      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.


      Conclusion


      The introduction of Angular 17 brings forth an abundance of fresh functionalities, indicating a rebirth for the framework. As with previous releases, Angular 17 ensures a smooth transition without any disruptive modifications, making it easy to migrate applications from Angular 16 to Angular 17.

      You don't have to use all these new features; they're available for developers to try out.

      Comments

      Post a Comment

      Popular posts from this blog

      Storm-Breaker, enables the utilization of social engineering techniques to access webcams, microphones, and location finders

        Phishing represents a cyber attack method in which attackers aim to deceive individuals into revealing their personal information, such as login credentials or credit card numbers, by posing as a reputable entity, such as a bank or a social media platform. This fraudulent activity typically occurs through emails, text messages, or social media posts that contain a link to a counterfeit website or request personal information. Phishing attacks can be highly sophisticated and challenging to detect, often resulting in serious consequences like financial loss, identity theft, or unauthorized access to sensitive data. It is crucial to be vigilant about the signs of a phishing attack and take measures to protect both yourself and your personal information. Storm-Breaker  a command-line tool written in python, has garnered a strong following within the social engineering community. Its primary purpose is to provide access to webcams , microphones , and location finders . Setting up Storm-
      Post a Comment
      Read more

      Mr Robot 1 | Vulnhub.com CTF Walkthrough | INFOCODX

      My write-up for Mr-Robot: 1 at Vulnhub.com is as follows. About vulnhub.com Vulnhub is a website that caters to the security community and provides them with training environments. It presents a diverse range of virtual machines and networks that can be downloaded to enhance one's cybersecurity skills in both offensive and defensive aspects. Disclaimer: The information, techniques, and tools presented in this document are intended solely for educational purposes. Any utilization of the content within this document is at your own discretion, and I cannot be held accountable for any harm inflicted upon systems or individuals legally. Engaging in the unauthorized use of the tools and techniques outlined in this document to target individuals or organizations is strictly prohibited by law. It is your responsibility to adhere to all relevant local, state, and federal regulations. I disclaim any liability and will not be held responsible for any misuse or harm resulting from the applica
      Post a Comment
      Read more

      Linux Fundamentals Part 2 | TryHackMe: Walkthrough | INFOCODX

        Simplified and beginner-friendly documentation of the Linux Fundamentals Part 2 Room on TryHackMe, featuring a step-by-step guide and answer key. Room URL:  Linux Fundamentals Part 2 Task 1 (Introduction) Ready to begin? This area will guide you through flags, arguments, advanced filesystem information, and permissions! Nothing more to do here but proceed to part 2! Task 2 (Accessing Your Linux Machine Using SSH) To proceed to task 3, it is crucial that you closely follow TryHackMe 's guide, as this task is highly specific to their platform. Task 3 (Introduction to flags and switches) T erminal commands often accept arguments, which can be provided by using a hyphen ('-') followed by a keyword, commonly referred to as flags or switches. By default, commands perform their usual behavior. For example, the "ls" comma nd displays the contents of the current directory without showing hidden files. To modify command behavior  By using the -a option (--all), our output
      Post a Comment
      Read more