Angular v16: The Big Update

Kastriot Çunaku -

Angular v16 has arrived with significant changes that are sure to revolutionize Angular's future, enhance its popularity, and make Angular developers' lives easier. The new version comes packed with exciting features, from performance improvements to new APIs and tools, we'll cover everything you need to know about this big update. Whether you're a seasoned Angular developer or just starting out, keep reading to learn about the latest release of this powerful framework.

Signals

Signals is set to be the most significant change to come to Angular 16, and will reshape the entire Angular development process by revolutionizing the way the framework detects changes. This much-needed update is long overdue and aims to fix many of the issues developers have faced in the past with the use of Zone.js. If you want to learn more about the story behind Angular Signals, be sure to check out guidelines here.

Create standalone app schematics

The Angular CLI's powerful schematics now allow you to convert your components, pipes, and directives to standalone ones. With app schematics, you can generate a complete standalone app. These schematics can also remove unnecessary ngModules after migration. As a result, the newly generated app code is lighter, without conf files from v15 improvements and with a light app bootstrapping thanks to the standalone feature.

...
bootstrapApplication(App, {
  providers: [provideHttpClient(), importProvidersFrom(FormsModule)],
}).catch((err) => console.error(err));

Esbuild dev-server

Experimental support for ng build using esbuild is already available. With v16 the tooling team has made some improvements to the Development Server (in developer preview). Now, you can run ng serve with esbuild.

To check it out, change @angular-devkit/build-angular:browser to @angular-devkit/build-angular:browser-esbuild.

Jest support

Jest is a widely used and highly regarded testing tool among developers. Although Karma is the default tool for Angular, the latest version of Angular (v16) includes support for Jest in developer preview, which is significant news.

Required inputs

It is now possible to ensure that a component or directive is used with its required inputs without any runtime overhead. If the inputs are not provided, a compile-time error will be generated.

@Input({required: true}) firstInput: string; // Required
@Input() secondInput: string; // Not required

Non-destructive hydration support

In order to improve the user experience, non-destructive hydration support has been implemented. After the browser receives the rendered markup from the server and parses it as a Document Object Model (DOM), Angular will traverse the structure, add event listeners, and create internal data structures. This allows the application to become interactive without requiring a re-rendering process, which fixes the issue of encountering a "flicker" with Angular Universal.

Bind route data, path params, and query params to inputs

This feature is excellent and practical. It will definitely make life easier for developers by reducing code complexity. We can take advantage of the functional guard feature and set component inputs directly from there, which is a great benefit.

// Add the withComponentInputBinding feature to the provideRouter method.
providers: [
  provideRouter(appRoutes, withComponentInputBinding()),
]

// Update the component to have an Input matching the name of the parameter.
@Input()
set id(heroId: string) {
  this.hero$ = this.service.getHero(heroId);
}

mapToCanActivate helper function

In Angular 16, class guards are deprecated and Angular provides a function helper to make it easy to switch to function without having to remove existing class guards.

const route: Route = {
  path: 'dashboard',
  canActivate: mapToCanActivate([AdminGuard]),
};

DestroyRef & takeUntilDestroyed

Another feature that was shipped with v16 is DestroyRef and takeUntilDestoryed, which enables more flexibility when you'd like to unsubscribe.

...
obs$: Observable<SomeType>;
const subscripion = obs$.subscribe(...);
inject(DestoryRef).onDestroy(() => subscription.unsubscribe());

API to provide CSP nonce for inline stylesheets

Many enterprises are concerned with inlining scripts for security reasons. This is sometimes flagged as insecure and unsafe. This feature will help you to specify and announce your content security policy for inline styles.

// Standalone version
...
bootstrapApplication(AppComponent, {
  providers: [{
    provide: CSP_NONCE,
    useValue: globalThis.myRandomNonceValue
  ]}
});

A lot of other great features I didn't mention above to make the article light, but they are available too in v16. Here is a quick list:

  • Reuse server-generated component styles
  • TS 5.0 support (Non-experimental decorators support)
  • NgTemplateOutlet strict type-checking
  • ProvideServerRendering for server-side standalone apps
  • Improvements to NgOptimizedImage by enabling images to fit within their parent container rather than having explicit dimensions
  • Streamline standalone import through Language service
  • Improvement in the documentation and Material CDK components accessibility
  • Angular team is working closely with the Material Design team to make Angular Material the referenced material design implementation for the Web

The release of Angular v16 marks a significant milestone in the evolution of this powerful web development framework. With a focus on improving performance, enhancing developer productivity, and providing more robust and flexible tools, Angular v16 promises to empower developers to build even more complex and dynamic web applications with ease. While there may be a learning curve associated with adapting to the changes in Angular v16, the benefits are well worth the effort. As a result, web developers can expect to create faster, more responsive, and more robust web applications that meet the needs of their users in today's ever-changing digital landscape. Ultimately, Angular v16 sets the stage for the future of web development and provides a solid foundation upon which developers can build innovative and engaging web experiences.