Google recently released Angular 15, the latest version of their popular SPA framework. The update includes a stable API for standalone components alongside several other significant improvements.
Standalone components are long-awaited features that enable developers to build Angular applications without using Modules.
It was previewed in Angular 14, and after some adjustments following community feedback, it's now reached a stable state and is ready for broad adoption.
The standalone API largely remains the same and consists of a new 'standalone' property that can be added to the existing Component decorator.
The CLI has been updated to support standalone component creation using the --standalone flag.
ng g component --standalone
bootstrapApplication is then used to bootstrap the Angular application using the root standalone component.
import {bootstrapApplication} from '@angular/platform-browser';
@Component({
standalone: true,
selector: 'demo-component',
template: `…`,
})
export class DemoComponent {
// component logic
}
bootstrapApplication(DemoComponent);
It is now also possible to build multi-route applications using standalone components by providing the router with the bootstrapApplication function.
bootstrapApplication(AppComponent, {
providers: [
provideRouter(appRoutes)
]
});
Angular 15 also includes two significant unrelated improvements.
The directive composition API has been requested since Angular 2 was first released. It allows applying directives to a component's host element from within the component.
@Component({
selector: 'demo-comopenent',
hostDirectives: [DemoDirective]
})
In addition, the NgOptimizedImage directive that was previewed in Angular 14.2 is now ready for wide adaptation.
According to the Angular team, it shows promising results in improving image load performance by enabling lazy loading of images and encouraging developers to adopt best practices.
Finally, the esbuild integration that was started in Angular 14 received several improvements, including support for Sass, SVG template files, file replacement, and the --watch flag.
While the integration is still flagged as experimental, initial tests have shown double-digit improvement in build times.
Developers are encouraged to experiment with the new build by updating the builder property in angular.json to:
"builder": "@angular-devkit/build-angular:browser-esbuild"
As with every experimental feature, developers are advised to take the necessary precautions before using it in production.
For a complete list of changes, head to the official release announcement
Angular is open-source software available under the MIT license. Contributions are welcome via the Angular GitHub repository.