The Angular framework is widely used to build SPA. It allows you to create single-page applications using TypeScript.The latest version was officially released and introduced some changes.

Let’s discuss this in the blog.

 

STANDALONE COMPONENTS

Angular's standalone components can now be fully utilized in various parts of the framework, such as HttpClient, Angular Elements, and the router. With the increased stability of these components, it is possible to bootstrap an entire application using just one component.

This can be achieved by importing the bootstrap application directly from the platform browser and integrating it into the component. Additionally, standalone components can be referenced directly within pipes by using the import function. 

Hence we can mark component and directive as standalone true.

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(PhotoGalleryComponent);

 

MULTI-ROUTE APPLICATION

With this particular version, it is possible to create a multi-route application utilizing the recently introduced standalone APIs for the router.

Here is an example of how to achieve that:

export const appRoutes: Routes = [{

path: 'lazy',

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

.then(routes => routes.lazyRoutes)

}];

 

Then, declare the lazyRoutes as mentioned below

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

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

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

 

Lastly, the appRoutes should be registered within the bootstrapApplication function to finalize the process.

bootstrapApplication(AppComponent, {

providers: [

provideRouter(appRoutes)

]

});

The provideRouter API offers yet another advantage in that it is tree-shakeable. This means that unused router features can be removed by bundlers during the build process, ultimately reducing the overall size of the application bundle containing the router code.

 

ROUTER UNWRAPS DEFAULT IMPORTS

As a means of simplifying the router and minimizing the amount of code involved, the Router will automatically unwrap the default export during lazy loading.

Now we can add the route:

{

path: 'lazy',

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

}

When performing lazy loading, the router will automatically search for a default export and utilize it as necessary.

 

FUNCTIONAL ROUTER GUARD

Boilerplate in guards have also been reduced.

If you want to implement a guard that verifies whether a user is logged in, you can utilize the following approach::

@Injectable({ providedIn: 'root' })

export class MyGuardWithDependency implements CanActivate {

constructor(private loginService: LoginService) {}

canActivate() {

return this.loginService.isLoggedIn();

}

}

const route = {

path: 'somePath',

canActivate: [MyGuardWithDependency]

};

The guard invokes isLoggedIn() only, while all logic is inside the service, so the guard itself is simple. With the new functional router guards, we can put this code above instead.

const route = {

path: 'admin',

canActivate: [() => inject(LoginService).isLoggedIn()]

};

From the above code, we can implement the guard in the declaration which results in minimizing the code.

 

IMAGE DIRECTIVE

The image directive in the latest version of Angular is now stable, and additional features have been added to enhance its functionality.

Automatic srcset generation - The directive in Angular now includes an automatic srcset generation feature that generates the srcset attribute for images, ensuring that the appropriate size image is requested.

Fill mode - which enables images to automatically fit into their parent containers without requiring explicit height and width specifications. It’s useful if the size of the image is not given.

NgOptimizedImage can be used directly in component or NgModule:

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

@NgModule({

imports: [NgOptimizedImage],

})

class AppModule {}

@Component({

standalone: true

imports: [NgOptimizedImage],

})

class MyStandaloneComponent {}

To use the component, we need to add ngSrc instead of src and mention the priority attribute to optimize the speed.

 

CLI IMPROVEMENTS

Now Angular CLI supports one more flag, which is standalone components.  It is now possible to create a new one using the following command:

ng g component –standalone

 

Conclusion

With the latest update to Angular, which includes the removal of the legacy compiler and the introduction of several new features, developers can expect a more stable and supportive development environment. Additionally, the update offers greater efficiency, helping developers to be more productive in their work.

Angular 15 introduces a range of features that will enable developers to create more robust and efficient applications.

If you are an Angular developer, consider upgrading to the latest version to take advantage of these features and improve your workflow.

If you are looking for Angular developers for your application/ project, hire us on a contract basis.

 

 

Recommended Articles

1) Angular 13 Features (If you want to know old version features,  just jump into this article)

2) Build Angular Applications with Firebase

3) Different Angular performance optimization techniques

4) Angular Signals - Another feature for App performance optimization