Angular 17 News — Supafast

Angular 17 News with Code Examples

Angular 17 News

Angular 17 was released on November 6, 2023, and it’s a major release with a number of new features and improvements. In this article, we’ll take a look at some of the most notable changes, with code examples to illustrate each one.

Production-ready hydration for server-side rendering (SSR)

Hydration is the process of converting a server-rendered Angular application to a client-side application. In Angular 17, hydration is now stable and production-ready, making it easier than ever to build fast and performant Angular applications.

Here is a code example of how to use hydration in Angular 17:

import { NgModule } from
 
'@angular/core';
import { BrowserModule } from
 
'@angular/platform-browser';
import { AppComponent } from
 
'./app.component';
import { ServerModule } from '@angular/platform-server';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ServerModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

To render the application on the server, you can use the following code:

import { renderModuleFactory } from '@angular/platform-server';
import { AppModule } from './app.module';

const appModuleFactory = renderModuleFactory(AppModule);

appModuleFactory.create().then((app) => {
  // Render the application to a string
  const appHtml = app.toHtml();

  // Send the rendered HTML to the client
});

To hydrate the application on the client, you can use the following code:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppModule } from './app.module';

bootstrapApplication(AppModule);

New built-in syntax for control flow

Angular 17 introduces a new built-in syntax for control flow, making it easier to write and maintain Angular templates.

The new control flow syntax is based on the following keywords:

• if: Used to conditionally render an element or block of code.
• else: Used to provide an alternative element or block of code to be rendered if the if condition is not met.
• elif: Used to provide additional alternative elements or blocks of code to be rendered if the if condition is not met.
• for: Used to iterate over a collection and render an element or block of code for each item in the collection.

Here is a code example of how to use the new control flow syntax in Angular 17:

<div *if="isLoggedIn">
  You are logged in!
</div>
<div *else>
  You are not logged in.
</div>

Support for ESM in server builds

Angular 17 now supports ESM (EcmaScript Module) in server builds, making it easier to use third-party libraries in Angular applications.

To use ESM in a server build, you need to add the following to your Angular configuration:

const config: AngularCompilerOptions = {
  // ...

  // Enable ESM support
  enableIvy: true,
};

Build speed improvements for server bundles

Angular 17 includes a number of build speed improvements for server bundles, making it faster to build and deploy Angular applications.

These improvements include:

• A new caching mechanism for server bundles
• A new AOT compiler that is optimized for server bundles
• A new server bundle format that is smaller and faster to load

Dev server SSR improvements

The Angular dev server now supports SSR, making it easier to develop and test Angular applications with SSR.

To enable SSR on the dev server, you need to add the following to your Angular configuration:

const config: AngularDevServerOptions = {
  // ...

  // Enable SSR support
  ssr: true,
};

Other notable changes

• The legacy Angular Material components will be removed in Angular 17. Developers are encouraged to migrate to the new MDC-based Angular Material components.
• Protractor is now deprecated. Developers are encouraged to use Cypress or another end-to-end testing framework.
• The Angular team has launched a new website, Angular.dev, which is designed to be a one-stop shop for all things Angular.

Conclusion

Angular 17 is a major release with a number of significant new features and improvements. Developers who are using Angular should upgrade to Angular 17 as soon as possible.