New Version of Angular: Angular 17 CHANGES:

#angular #node #javascript

1. New website: We will have new documentation, tutorials, and a playground section where we can run code live.

It will no longer be called angular.io, but angular.dev. The logo has also changed.

2. Change in syntax: New syntax in HTML template:

Angular 17 changes the HTML syntax. One benefit of this new syntax is that it is integrated into the language itself, so we don’t have to import anything to use if, for, and switch.

Now, the if, for, and switch blocks are placed outside of HTML tags, allowing us to use else-if and else. In the for loop, an empty section is included that will be executed if the array is empty. With this change, the iterations in the for loop have increased their performance by 90%, as it is now mandatory to use track by:

Track involves specifying which ID the array contains to identify each element, improving performance.

Previous Versions:

They used ngIf, ngFor, and ngSwitch. The change is due to Angular using the Zone.js library for these directives, which is not very optimized. To improve its performance, this syntax change was made.

Before, these directive libraries needed to be imported: CommonModule, ngIf, among others.

These library tags are used in HTML tags:

Moreover, previous versions do not have the empty section. To check if an array is empty, a conditional is used.

3. Stable hydration added in SSR.

We had it available as a developer preview, and it is now available stably. Hydration significantly improves the performance of SSR applications, as without hydration, there was always a flicker whenever the application loaded because it first loaded on the server and then on the client. With hydration, this process is improved.

*4. Stable addition of signals.
*
These have been available since Angular 16, but now they will be stable.

5. Projects will come as standalone by default, without modules.

Since Angular 16, standalone components can be created: ng g c --standalone components/folder.

In Angular 17, all components are created as standalone by default.

Before these versions, a component had a module that declared and exported the component. To use these components in the app module, the module had to be imported:

However, with standalone components, modules are no longer needed, so the standalone component is imported directly in imports. The component has standalone: true, and in its imports, we can import what that component needs. CommonModule acts as the module internally:

Command to migrate to standalone: ng generate @angular/core:standalone. Or we can simply add these properties to the normal component to make it standalone and remove its module.

Standalone components can be mixed with those that are not. It is recommended to create new components as standalone, even in older projects.

This can also be used in directives, pipes, and components, which will no longer go in declarations but in imports.

6. Adds defer for lazy loading at the component level.

This allows lazy loading for components that are not visible in the viewport, preventing loading if scrolling is not needed.

7. Switching from Webpack to using esbuild with Vite:

This results in much faster build times than what we had with Webpack. In some cases, the build can be up to 87% faster.

8. Ability to write CSS in the TypeScript file:

Although this is not recommended, and it is advised to keep a separate file for CSS:

Now, when we run ng new to create a new project, it will ask if we want it to be SSR, as Angular always creates an SPA by default. So now, in the ng new process, it will no longer ask if we want to create the routes file; this will always be created automatically. Instead, it will now ask if we want an SSR (server-side render).

Previously in Angular, we could also create an SSR by installing Angular Universal later, but now it is more convenient as the CLI does it during project creation.

10. Custom inputs have been included in the transforms, allowing us that when we already have a boolean property, we don’t need to specify if it is required to be equal to true; simply stating the name of the input assumes it will be true, helping to reduce code: