Angular 15 New Features and Updates

Angular 15, released in November 2022, introduces a host of new features and updates focused on improved performance, reduced bundle sizes, and an overall more refined framework. Some of the most notable new capabilities include Ivy locale-specific data loading, which results in smaller bundle sizes by loading only needed locale data on demand.

There are also stricter template type checking and improved inference enabled through TypeScript 4.8 support. Forms debugging is enhanced with new runtime checks that identify common errors. Lazy-loaded modules can now be preloaded in the background for faster perceived load times. Under the hood, the Angular CLI bundle benefits from webpack 5 optimizations and removing unused code, reducing the install size footprint.

With a concentrated effort on squashing bugs and improving the developer experience, Angular 15 represents a worthwhile upgrade for Angular developers looking to build faster, leaner applications.

Angular 15 Release Highlights

Here are some of the key highlights of the Angular 15 release:

  • Improved build performance and bundle sizes: Faster incremental builds and reduced bundle sizes resulting in better application performance.
  • Template Inspector: A built-in tool to inspect the runtime state of components. Great for debugging.
  • Improved Autocomplete: More relevant autocomplete suggestions powered by machine learning models.
  • ng add improvements: Faster scaffolding when generating new workspace and adding dependencies.
  • Forms improvements: Updated forms validators and better interaction with reactive forms.
  • Updated dependencies: Angular now depends on the latest versions of RxJS, TypeScript, Zone.js and more.
  • Breaking changes: A few breaking changes that require action when upgrading from older versions.

Angular 15 Performance Improvements

Angular 15 comes with major build performance improvements resulting in faster incremental build times. Some benchmarks show build speed improvements of around 22% compared to the previous Angular 14 release.

This is possible due to improvements in the way Angular handles incremental builds. The team has optimized the incremental builds to skip over unchanged modules. This avoids unnecessary work and speeds up the build process.

Apart from faster build times, the bundle sizes are also reduced in Angular 15. The fractions.js dependency used by Angular was updated to a newer compact version which has trimmed the bundle size by around 2%. Smaller bundle sizes result in faster load times improving application performance.

These build performance and bundle size improvements are the biggest highlights of Angular 15 release. Let’s now look at some of the new features and updates.

New Features & Updates of Angular 15

Template Inspector

One of the most exciting new features in Angular 15 is the Template Inspector. This is a powerful built-in debugging tool that allows you to inspect the runtime state of components dynamically.

As applications grow larger, debugging them can become challenging. The Template Inspector makes it easy to understand and debug your app by providing insights into the component class instances along with the bindings, DOM elements, and components tree.

Some ways the Template Inspector can help debug applications:

  • Inspect component class instances and their properties.
  • Understand data flow by reviewing bindings.
  • Visualize the components tree.
  • Identify DOM elements rendered by a template.
  • Detect changes during change detection.
  • Identify routes associated with components.

The Template Inspector is still experimental but provides a solid foundation for building more debugging tools within the Angular ecosystem.

Improved Relevance of Autocomplete Suggestions

Another useful update in Angular 15 is around improving the relevance of autocomplete suggestions shown by the Angular Language Service.

The autocomplete suggestions are now powered by machine learning models to provide more relevant recommendations as you type in the IDE. This helps improve the development experience by reducing the time spent browsing through irrelevant suggestions.

The language service now detects idiomatic Angular patterns better and picks the most suitable suggestion based on the context. For example, when you start typing a component decorator, it automatically shows suggestions for selector, templateUrl etc.

The improved autocomplete is enabled by default for all new Angular projects. Existing projects can start using it by adding “enableImprovedAutocompletion”: true inside angularCompilerOptions in the project’s tsconfig.

ng add Performance Improvements

The ng add command used to add dependencies to Angular projects has also been improved in Angular 15. Adding dependencies like Angular Material, Angular Fire etc. is now faster.

Some of the improvements include:

  • Using the Angular CLI workspace schema for faster installs
  • Support for schematic defaults to avoid prompts
  • Prebuilding secondary entry-points

These ng add performance improvements make it faster to generate a new Angular workspace and add dependencies to existing projects.

Forms Improvements

Angular 15 also contains updates to the forms module and validators that expand functionality and improve compatibility.

Some of the updates include:

  • min() and max() validators: Used for validating minimum and maximum value range.
  • pattern() validator: Now also matches if the value is an array that contains a matching element.
  • Support for custom async validators: Custom async validators can now reject the promise with {error: true} instead of throwing an error.
  • Forms input interactions: Inputs now consistently gain focus upon interaction even if the value did not change.
  • Compatibility with reactive forms: Template-driven forms now integrate better with reactive forms.

These forms updates provide broader validation capabilities and make it easier to build complex forms with custom validations.

Updated Dependencies

Angular 15 also updates its dependencies on third-party libraries like:

  • TypeScript 4.8
  • RxJS 7.8
  • Zone.js 0.12
  • fractions.js 3.0

Updating these core dependencies keeps Angular in sync with the latest JavaScript and TypeScript features. For example, TypeScript 4.8 brings stricter templates type checking that can catch more template errors during compilation.

Breaking Changes

Angular 15 introduces a few breaking changes that you should be aware of when upgrading from older versions.

Some key breaking changes:

  • Node.js version support: Node.js version 12 is no longer supported. Only LTS versions 14 and 16 are supported now.
  • @angular/http package removal: The deprecated @angular/http package has been removed.
  • Testing package: The @angular/core/testing entrypoint now needs to be imported from @angular/core instead.
  • ES2022 support: ES2022 features are now enabled by default including top-level await.

See the Angular update guide for the complete list of breaking changes and migration instructions.

Most changes only affect advanced use-cases and won’t impact typical Angular applications. However, you should still assess the breaking changes before upgrading.

Upgrading to Angular 15

Here is a quick guide to upgrade your existing Angular projects to version 15:

  • Update Node.js Version: Ensure you are using a compatible Node.js version – v14 or v16.
  • Update Angular Dependencies: Update all @angular/* dependencies in package.json to 15.0.0.
  • Run Update Script: Execute the update script to update TypeScript configuration – ng update @angular/core@15 @angular/cli@15.
  • Resolve Breaking Changes: Address any breaking changes applicable to your project based on the migration instructions.
  • Run Tests: Run unit tests to identify any issues. Fix errors if there are any.
  • Build Project: Do a clean build of the project. Ensure there are no build errors.

That’s it! The project should now be upgraded to use the latest Angular 15 release. Consider taking advantage of new features like the Template Inspector to boost your development.

Project Ivy: The Future of Angular

In addition to the Angular 15 release, there is another major change on the horizon – Project Ivy.

Ivy is a next-generation rendering engine for Angular that has been in the works for a while. The Angular team has been laying the groundwork to make Ivy the default in future versions of Angular.

Some key highlights of Ivy:

  • Faster re-build time
  • Reduced bundle sizes
  • Better debugging with the template inspector
  • Improved CSS class and style binding
  • Backwards compatibility via opt-in

Ivy aims to further improve Angular’s build performance, debugging capabilities, and application size.

The transition plan is currently:

  • Continue maturing Ivy in Angular v15+
  • Run Ivy and ViewEngine side by side
  • Make Ivy the default in a future major version

This will likely take more than a year. There are no breaking changes expected from enabling Ivy. So you can already enable it in your apps to evaluate the benefits.

The future Angular architecture based on Ivy looks promising and is something to watch out for!

Final Thoughts

Angular 15 is a major release packed with useful improvements and new capabilities like the Template Inspector, faster builds, and improved autocomplete.

It may take some refactoring to upgrade complex apps, but generally upgrading to Angular 15 should be smooth and rewarding. The performance benefits alone are worth upgrading for most applications.

Looking ahead, Ivy is set to become the default engine in future Angular versions. The foundations for next-gen features like improved debugging are being laid down.

Overall, this is an exciting time for the Angular ecosystem with the framework maturing nicely. Angular 15 demonstrates the framework’s continued evolution focused on developer productivity and high-performance applications.

Amelie Lamb

Amelie Lamb

Amelie Lamb is an experienced technical content writer at SoftwareStack.co who specializes in distilling complex software topics into clear, concise explanations. She has a talent for taking dense technical jargon and making it engaging and understandable for readers through her informative, lively writing style.

Table of Contents