Hey there,

Version 15.0.0 is here and it has some great updates for Angular developers everywhere. 🎉🎉

TL;DR 🙌

✅ Simplifying Angular with Stable Standalone APIs

✅ Router and HttpClient tree-shakable standalone APIs

✅ Directive composition API

✅ Image directive is now stable!

✅ Router unwraps default imports

✅ Better stack traces

✅ Automatic imports in language service

✅ Angular CLI enhancements

✅ Deprecation

How to update to version 15

Visit update.angular.io for detailed information and guidance. To have the best update experience,

Update to 15

ng update @angular/cli @angular/core

In order to update your global angular,

npm i -g @angular/cli

✅ Simplifying Angular with Stable Standalone API 👌

• Angular standalone components aim to streamline the authoring of Angular applications by reducing the need for NgModules.

• Standalone alone APIs are no longer in developer preview and are now part of the stable API surface
  

import {bootstrapApplication} from '@angular/platform-browser';
import {ImageGridComponent} from'./image-grid';

@Component({
  standalone: true,
  selector: 'photo-gallery',
  imports: [ImageGridComponent],
  template: `
     <image-grid [images]="imageList"></image-grid>
  `,
})
export class PhotoGalleryComponent {
  // component logic
}
bootstrapApplication(PhotoAppComponent);

• 👉 In v14, standalone components are in developer preview.

• 👉 They are not stable API yet and will be potentially changed. But available to exploration and development.

• As per the official announcement an example of usage can be found over here. 👈

✅Router and HttpClient tree-shakable standalone APIs

• 👉 It is possible to build a multi-route application using the new router standalone APIs

import {Routes} from '@angular/router';

import {LazyComponent} from './lazy.component';

export const lazyRoutes: Routes = [{path: '', component: LazyComponent}];

export const appRoutes: Routes = [{
  path: 'lazy',
  loadChildren: () => import('./lazy/lazy.routes').then(routes => routes.lazyRoutes)
}];

• Register the appRoutes in the bootstrapApplication call

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(appRoutes)
  ]
});

• 👉 provideRouter API is tree-shakable
• Bundlers can remove unused features of the router at build-time

✅ Directive composition API

• 👉 The directive composition API enables developers to enhance host elements with directives and equips Angular with a powerful code reuse strategy
• 👉 The directive composition API only works with standalone directives
• This feature was inspired by the most popular feature request on GitHub asking for the functionality to add directives to a host element.

@Component({
  selector: 'mat-menu',
  hostDirectives: [HasColor, {
    directive: CdkMenu,
    inputs: ['cdkMenuDisabled: disabled'],
    outputs: ['cdkMenuClosed: closed']
  }]
})
class MatMenu {}

✅ Image directive is now stable!

• The v15 release also includes a few new features for the image directive

  • 👉 Automatic srcset generation
    • The directive ensures that an appropriately sized image is requested by generating the srcset attribute for you.
    • This can reduce download times for your images.
  • 👉 Fill mode [experimental]
    • This mode causes the image to fill its parent container, removing the requirement to declare the image’s width and height.
    • It’s a handy tool if you don’t know the sizes of your images or if you’d like to migrate CSS background images to use the directive.

• The standalone NgOptimizedImage directive can be used directly in the component or NgModule:
  
  

import { NgOptimizedImage } from '@angular/common';

// Include it into the necessary NgModule
@NgModule({
  imports: [NgOptimizedImage],
})
class AppModule {}

// ... or a standalone Component
@Component({
  standalone: true
  imports: [NgOptimizedImage],
})
class MyStandaloneComponent {}

• To use it within a component just replace the image’s src attribute with ngSrc and make sure you specify the priority attribute for your LCP images

✅ Router unwraps default imports

• To make the router simpler and reduce boilerplate further, the router now auto-unwraps default exports when lazy loading

• Before this change, to lazy load a standalone component
  

{
  path: 'lazy',
  loadComponent: () => import('./lazy-file').then(m => m.LazyComponent),
}

• Now the router will look for a default export and if it finds it, use it automatically, which simplifies the route declaration to

{
  path: 'lazy',
  loadComponent: () => import('./lazy-file'),
}

✅ Better stack traces

• More understandable stack errors
• 👉 Instead of showing errors from third party dependencies error messages are more focused on code that developer has authored.

✅Automatic imports in language service

• The language service now can automatically import components that you’re using in a template but haven’t added to a standalone component or an NgModule.

✅ CLI improvements

• Now you can generate a new standalone component via ng g component --standalone

✅ Deprecations

• providedIn: 'any' - The NgModule injector that receives the resolution.
• providedIn: NgModule
• Team will stop publishing new releases of @angular/flex-layout

For more let us hear it from the creators

Credits : Official Announcement 😄

Changelog : Repository