Angular v15 is available now!

Google removed Angular's outdated compiler and rendering pipeline over the previous year, which made it possible to make a number of developer experience enhancements in the last few months. The result of all of this is Angular v15, which includes numerous improvements that improve performance and the developer experience.

Independent APIs are now dependable.

Google released new stand-alone APIs in version 14 that let developers create applications without utilising NgModules. Google announced the promotion of these APIs from developer preview to the stable API surface. From this point on, he will steadily evolve them using semantic versioning.

Google has made sure that standalone components work across Angular, and they are now fully functional in HttpClient, Angular Elements, router, and more. This was done as part of making sure that standalone APIs were prepared to graduate.

You may bootstrap an application with just one component thanks to the standalone APIs.

Router and HttpClient have independent, shakeable APIs.

The new router standalone APIs can be used to create multi-route applications! You can use the following to declare the root route:

export const appRoutes: Routes = [{

?path: 'lazy',

?loadChildren: () => import('./lazy/lazy.routes')

???.then(routes => routes.lazyRoutes)

}];

Where?lazyRoutes?are declared in:

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

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

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

and finally, register the?appRoutes?in the?bootstrapApplication?call:

bootstrapApplication(AppComponent, {

?providers: [

???provideRouter(appRoutes)

?]

});

The provideRouter API's ability to shake trees is an added bonus! At build time, bundlers can delete the router's unwanted functionalities.

API for Directive Composition

Code reuse has reached a whole new level thanks to the directive composition API!

Developers can use the directive composition API to add directives to host components, giving Angular a powerful code reuse technique that is only made possible by our compiler. Only solitary directives are compatible with the API for directive composition.

Image directive is now stable!

A few additional features for the image directive are also included in the v15 release:

? Automatic srcset generation: By creating the srcset property for you, the directive makes sure that an appropriate-sized picture is requested. Your photographs' download times may be shortened as a result.

? Fill mode [experimental]: With this mode, the image fills its parent container and its width and height are not necessary to be declared. If you don't know the sizes of your photos or want to go over to using CSS background images with the directive, this is a useful tool.

In your component or NgModule, you can utilise the independent NgOptimizedImage directive.

Simply replace the image's src attribute with ngSrc to use it within a component, and be sure to give your LCP images the priority attribute.

Router unwraps standard imports

The router now automatically unwraps default exports while lazy loading, significantly streamlining the router and reducing boilerplate.

Consider the following LazyComponent you might have:

@Component({

?standalone: true,

?template: '...'

})

export default class LazyComponent { ... }

Before this change, to lazy load a standalone component you had to:

{

?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'),

}

Stabilize components depending on MDC

Google declared that the Material Design Components for Web (MDC)-based refactoring of the Angular material components is now complete! With this adjustment, Angular can now even more closely adhere to the Material Design specification, reuse code from primitives created by the Material Design team, and support Material 3 once the style tokens are complete.

Changes to other measures include:

Enhancements to the experimental CDK Listbox support esbuild

Additional advancements in the parts

improved stack traces

Language service automatic imports

CLI advancements

Key contributions from the community

Deprecations

And a lot more.

Eager for the upcoming events!

Google will then work on enhancing their server-side rendering workflow and responsiveness while enhancing everyone's quality of life!

We can't wait to let you know what's next!

Follow our page to stay up to date and receive the latest news.

Page Link: https://www.dhirubhai.net/company/newel-technologies-pvt-ltd/

#angular15 #angulardeveloper #angularcommunitity