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
What’s in this release?
✅ 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.
- 👉 Automatic srcset generation
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
Top comments (1)
🙌🔥