Highlighting the Release of Angular v15

On November 16, 2022, the Angular team published version 15 of the framework. Let’s look at what changes are available in the newest version.

Stand-alone Components

Stand-alone components are components that are defined outside any NgModule. They are providing a simplified API that reduces the boilerplate necessary to define a component. Stand-alone components, directives and pipes integrate nicely with the existing Angular landscape. They

• can be used in traditional modules,
• can import modules to reuse existing code, and
• can even be used to bootstrap an application.

You can learn more in the official guide.

New Tree-shakeable APIs

Along with the stand-alone components, some services are available in a lighter form that works better with tree shaking. These APIs will help you keep your reusable code smaller—instead of including entire modules with all the features you don’t use. Thus, you can pick only the things that you need. All the rest is dropped during the build process with tree shaking.

Router

provideRouter allows you to pick various features of the router to optimize your build size:

type RouterFeatures = PreloadingFeature | DebugTracingFeature | InitialNavigationFeature | InMemoryScrollingFeature | RouterConfigurationFeature;

HttpClient

Similarly, provideHttpClient allows you to choose from the following features:

enum HttpFeatureKind {
  Interceptors
  LegacyInterceptors
  CustomXsrfConfiguration
  NoXsrfProtection
  JsonpSupport
  RequestsMadeViaParent
}

Image Directive

The NgOptimizedImage directive has become stable. The directive enforces best practices in loading images, improving the page's load performance.

Together with an ImageLoader, it can be used to generate the appropriate resource URL for a given image file. You can learn more about this (including plans for the future) on the Chrome blog in Optimizing Images with the Angular Image Directive.

Directive Composition API

As of version 15, Angular allows you to reuse existing directives as building blocks when creating new directives or components. With hostDirectives, you can add directives to your host element, effectively combining a few directives into one. It is similar to how some languages support multiple inheritance in classes. You can learn more, including performance implications, in the official guide.

Migration of Angular Material Components to new components based on MDC

The Angular team migrated the Angular Material components to reuse framework-independent code available in Material Design Components for the Web ("MDC"). This results in an improvement in how close the components are following the Material Design 2 specification; in the future, it will allow for switching styling to Material Design 3.

If you overwrite many styles in Angular Material components, be prepared for a large amount of refactoring. Migration requires changing the internal DOM structure and styling of the components, as well as some changes to the external API. You can learn more about what was changed and what updates are needed in the application in the MDC migration guide. The previous components are deprecated, but are still available to smoothen the migration.

Deprecated Features

Besides new additions to the framework, a few things were deprecated and will be removed in a future version. If you are using any of the features below in your apps, you should start making plans to move away from them.

@angular/flex-layout

The Angular team will stop releasing new versions of @angular/flex-layout — but they will publish security and browser compatibility updates for the following year. Instead, there are two alternatives available in pure CSS:

• flexbox
• grid

You can find the official recommendations in the article on the Angular blog in Modern CSS in Angular: Layouts.

providedIn: any and providedIn: NgModule

Both options were decided to be uncommon and confusing enough to be deprecated. If you use them, check the official release announcement to see the way forward. We will no longer be able to register services in lazy loaded modules using providedIn: NgModule, but only by using an old fashion technique—using the NgModule.providers array.

Update Guide

As always, you can find relevant update instructions in the Angular Update Guide.

Angular v15.1.0 update

Self-closing Tags for Non-native HTML Elements

Starting with version 15.1.0, Angular supports self-closing tags for non-native HTML elements (including Angular components). This will allow decluttering your templates by omitting closing tags. For example, you can replace <my-component></my-component> with just <my-component />.

Looking for more support for your Angular projects?

Our team at DevIntent is highly experienced in web development, including framework migration and updates. Check out our offerings or reach out.