An Angular Roadmap - The Past, Present, and Future of Angular

Angular Updates: What's New in Version 18

Angular 18 was released to the public in May 2024, highlighting major updates such as the introduction of the new reactivity model powered by Signals, enhanced application performance through deferred loading and hybrid rendering, and revamped testing frameworks with native support for Jest and Web Test Runner. Accessibility improvements for components align with WCAG standards, making applications more inclusive. These updates position Angular 18 as a more scalable, faster, and accessible platform for developers.

With the release of Angular 18, developers are already speculating about the next big features in Angular 19. Expect enhancements in reactivity, a continued focus on performance optimization, and potential new tooling for advanced testing and debugging. To stay ahead of the curve and see what the future holds for Angular, check out our blog on Potential Angular 19 Features and Trends. This will provide deeper insights into the ongoing evolution of the platform and what developers can look forward to in the next iteration.

Empower your development. Build better applications. Try MESCIUS' Tools for JavaScript and .NET!

Paleolithic JavaScript - SproutCore

In the beginning, there was SproutCore. It was the first comprehensive JavaScript framework aimed at making it easy to build desktop-quality single-page web apps. It’s not that this wasn’t possible before.

When Google released Gmail, it showed the world that web apps really could replace complex desktop applications. Google even open-sourced the Closure toolkit—a set of libraries and an optimizing compiler that it used to build Gmail.

The problem was that Google’s Closure tools weren’t very developer-friendly. They relied heavily on Java, which alienated web developers who were used to working with JavaScript, PHP, Ruby, and Python. Gmail was a great demonstration of what was possible, but developing similar applications still felt out of reach for many.

Some courageous developers managed to string together amazing single page apps using a combination of jQuery, duct tape, and hope. While these apps looked amazing to end-users, for the developers working on them, the apps quickly turned into hulking piles of technical debt that made the dev team dread heading to work in the morning.

As a result, a few enterprising developers began to work on frameworks that would bring Gmail-like apps within easy reach of web developers everywhere. SproutCore was the first of these frameworks to take off. It came with a complete set of widgets that made it possible to build complex web applications without even touching HTML or CSS.

This ended up being great for former desktop developers who had been dragged kicking and screaming onto the web. Several more frameworks popped up with similar goals; GWT and Cappuccino were the most prominent.

These frameworks even avoided JavaScript by transpiling other languages into JS. Again, this was great for desktop developers. But it left passionate web developers out in the cold and made them feel as though their hard-won HTML, CSS, and JavaScript skills weren’t valuable.

This left an opening for a framework that truly embraced the web, instead of trying to plaster over it and pretend it was something else. A couple of early frameworks (Backbone and Knockout) appeared, and achieved a moderate amount of success.

Ember also showed up around this time. It took SproutCore, stripped it down to its bones, and tried to rebuild it into something truly web-friendly. Ember wanted to be the Six Million Dollar Man of the JavaScript world: rebuilt better, stronger, and faster.

None of these frameworks rocketed to popularity. The world was waiting for something better. In 2010, that something better appeared—it was named Angular.

The Golden Age of Angular

Even before Angular version 1.0 had been released, Angular took the front-end development world by storm. Finally, we had an easy-to-use JavaScript framework that treated HTML as a first-class citizen. Developers and designers could now work together to build amazing single-page applications.

This came as a relief to designers, who had been annoyed and offended because older frameworks had treated HTML and CSS as tools for barbarians, tools that no civilized developer should have to touch.

The first thing that seemed magical to developers trying Angular for the first time was two-way data binding. Prior to this, most developers had only seen this kind of data binding in desktop frameworks like WPF and Windows Forms.

It was great to be able to bind forms and other UI elements to JavaScript model objects. While two-way data binding could cause performance problems when overused, teams that used it judiciously found that Angular enabled them to create complex front-end applications much more quickly than ever before.

Angular proved to be popular for more than just easy binding of data to HTML elements. Angular directives provided an easy way to create reusable HTML + CSS components. Although other JavaScript frameworks provided this before Angular, Angular was the first one that became extremely popular.

Reusable components had long been in-use in server-side frameworks. ASP.NET user controls and partial templates in Rails and Django are but a few examples.

Finally, Angular made dependency injection popular in the front-end development world. Dependency injection had long been popular in enterprise applications, which is perhaps why it hadn’t caught on in the JavaScript world.

Front-end developers have long been averse to what they see as needlessly complex enterprise software design patterns. This concern isn’t without merit. Have you ever, in the course of writing an application, said to yourself “What I really need here is a "SimpleBeanFactoryAwareAspectInstanceFactory?"

Dependency injection, though, has proven its worth. And Angular made dependency injection easy to use for an audience that hadn’t used it much in the past. Need an HTTP client? Or perhaps you’d like to do some animation?

No problem. Angular had built-in services for those. Just ask for them, and Angular would inject them into your components. No need to instantiate anything yourself.

Or perhaps you wanted to use the browser’s window or location objects without making it impossible to unit test your components outside of a browser? Angular had you covered there too, with its built-in $window and $location services.

At runtime, you’d get the browser objects you were expecting. And when running unit tests server-side in Node.js, you could pass mock services into your components to ensure they behaved as expected in various scenarios.

If all of this wasn’t enough, Angular also made it simple to register and inject your own services. For developers who were used to binding all their data to the DOM and hoping for the best, this was awesome.

If you were writing a new front-end app that called for APIs that would cost your company a lot of money if overused, you’d probably prefer to be able to write tests ahead of time to ensure that your application doesn’t try to do something like calling the Twilio API 800 million times.

So you’d create a Twilio service that gets injected at runtime. At testing time, you’d create a mock service that records the cost of every API call your application is trying to make. You’d write tests that cover common usage scenarios and ensure that these scenarios don’t result in your company receiving a 7-figure bill.

Overall, most developers found that Angular directives combined with dependency injection made it possible to write modular, testable front-end applications using tried-and-true software engineering techniques. Many development teams decided that this resulted in a happy state of affairs, and decided to go all-in on Angular.

The Angular Decline? The Rise of React

While things were mostly great in the world of Angular, it wasn’t all sunshine and lollipops. Developers were starting to run into severe performance problems when they tried to bind too many model objects to too many DOM elements. Some applications slowed to a crawl.

Direct calls to $digest and other black-magic sorcery started becoming necessary to achieve acceptable performance. Around the same time, a new challenger appeared: React. At first, React didn’t seem to pose too large a danger to Angular.

After all, these React weirdos had gone to the trouble of inventing JSX, which looked a lot like a way to mix markup into your code. Hadn’t we gone to a lot of trouble to invent templating languages for the explicit reason of avoiding mixing markup and code?

As it turned out, React’s approach was pretty popular in the front-end development community. It didn’t rocket to popularity, however. Angular was still dominant, and it looked like it would remain that way. Until that is, Angular’s popularity was given a good kick in the teeth from an unexpected source: the Angular team itself.

The Introduction of Angular 2

Angular 2 was first announced at the ng-europe conference in 2014. The Angular team’s plans came as a shock to the Angular community, to say the least.

Reaction from Angular developers was swift and negative, and not without reason. Angular 2 would be getting rid of many familiar concepts from Angular 1, introducing a new, incompatible templating language (and oh, by the way) would also be programmed using an entirely new language.

AngularJS

Although both Angular 1 and Angular 2 were called ‘Angular,’ in reality, they were very different frameworks with a few things in common. To help prevent confusion, the Angular team started referring to the old version of Angular as ‘AngularJS’, and the new version as simply ‘Angular.'

This makes intuitive sense since AngularJS was written in JavaScript, and Angular was not. To keep the distinction between the frameworks clear, I’ll be referring to Angular 1 as AngularJS from this point forward.

As a result of all of this, AngularJS developers lost faith in the framework’s future. They threatened to move to a new framework on future projects, and that is precisely what many of them did. React was the biggest beneficiary of the mass exodus from AngularJS.

Although React didn't do as much as AngularJS, in a way that was positive. If you’re using a view library that doesn’t try to include everything plus the kitchen sink, it’s a lot more difficult for the developers of that library to pull the rug out from under you in the future.

In the beginning, using React was a bit of a pain compared to AngularJS. You had to cobble together a patchwork of libraries just to cover the functionality the AngularJS provided out of the box.

Many teams saw this as a good way to reduce risk, because it was unlikely that the developers of all of those libraries would decide to make backward incompatible breaking changes at the same time, which is essentially what Angular had done.

The Emergence of Vue

To compound AngularJS’ woes, another framework named Vue showed up at about the same time the drama over Angular 2 was occurring. Vue was inspired by AngularJS but aimed to simplify it and get rid of what Vue’s creator saw as unnecessary complexity (so Vue felt very familiar to existing AngularJS developers).

Vue provided a safe haven for many AngularJS developers who didn’t want to move over to React.

This doesn’t mean that AngularJS developers were not waiting patiently for Angular 2 to appear. But it’s clear that there was a mass exodus from AngularJS to React and Vue due to the uncertainty caused by the plans for Angular 2.

Rising From the Ashes with Angular 2

Eventually, Angular 2 was released. As expected, it did away with many familiar concepts from AngularJS but kept a few of the best pieces like services and dependency injection. Fortunately for the sanity of developers, Angular uses plain TypeScript and not a fork as originally planned.

To make things more confusing, the Angular team maintained a fork of the new framework that used the Dart programming language instead of TypeScript. Initially, the TypeScript and Dart versions were developed in sync, generated from a single code base.

Eventually, the TS and Dart versions of Angular decided to go their separate ways, and Angular Dart now exists on its own.

Even with this confusion, Angular’s popularity began to increase again after the Angular 2 release. It happened slowly. As often occurs in software development, trends shifted. Developers realized that a big, batteries-included framework might actually be useful. After all, when your application grows large enough, you end up actually needing all of those batteries.

Enterprise developers, in particular, began moving back to Angular. This makes sense. Usually, when you start an enterprise web app, you know it is going to be complex. There’s no point in starting with a tiny MVP when you know from the beginning all 87 things your application is going to be expected to do.

Where's Angular 3?

Although Angular 2 wasn’t perfect, many developers of complex web applications began to realize that the new-and-improved Angular was a good fit for their needs. Fortunately for them, Angular had some exciting improvements in store. More importantly, the Angular team demonstrated that it could consistently publish new versions of the framework with few breaking changes between versions

In a move that seemed odd at the time, the Angular team decided to skip version 3 entirely and move to version 4. This was done for good reason: the team working on Angular’s router package had already pushed ahead and released version 3, while the remainder of Angular was still at version 2.3.

They decided to keep all Angular package versions in sync moving forward, and bumping everything up to version 4 for the next release was the easiest way to achieve this.

Angular 4

Angular 4 had some significant changes, including added ahead of time compilation, which resulted in small production JavaScript bundles and shorter application load time. Support for server-side rendering was added, which was a boost for teams that wanted to render their app ahead of time to improve initial load performance.

Many other improvements were added throughout the framework, but upgrading apps from Angular 2 to 4 was quick and painless in most cases.

Angular 4.3 and Angular 5

Angular 4.3 added a new HTTP client that was easier to use than the old HTTP service. In Angular 5, the old HTTP service was deprecated and would be dropped in the next release.

In spite of this inconvenience, there was relatively little grumbling because the upgrade in most cases was straightforward. Angular 5 also added better internationalization support and further build optimizations.

Angular 6 and 7

Angular 6 and 7 were disappointing to some developers. There were no large changes, but there were many small quality of life improvements, especially to the Angular CLI tooling.

The decreasing number of visible changes isn’t an indication that the Angular team has stopped innovating. Instead, it shows that the framework is mature, so the development team is now free to do more work behind the scenes, fixing bugs and improving performance.

The stability of the framework since the release of Angular 2 has drawn some old-school AngularJS developers back into the Angular world. It has also attracted the attention of enterprise development teams.

When you’re building enterprise apps that may live for decades it’s ideal to use a framework that gets new releases on a predictable schedule but doesn’t change too rapidly. A developer who had only used Angular 2 could be up and running and contributing to an Angular 7 app within minutes.

Angular 8 and Angular Ivy

And that brings us to today. As we’ve seen, Angular has come a long way. It has gone from loved by web developers to being reviled to being admired, although it isn’t yet loved again like it was in its early days.

On the horizon, we have Angular 8. A ton of work has been done in Angular 8 to make it easy to use with the Bazel build system, which is absolutely amazing news for all 3 developers who are using it outside of Google. Read about Angular 8 changes.

More excitingly, though, the Angular team is hard at work on a new rendered called Angular Ivy. It’s intended to be a drop-in replacement for the current rendered. For the most part, current apps won’t need to make any changes to use Angular Ivy.

If Angular Ivy is a drop-in replacement, why should developers care? Two important reasons: speed, and bundle size—two very important concerns. For a few years, it seemed like web developers had gone a bit crazy.

Teams were shipping JavaScript bundles that were 5MB, 10MB, or even larger, and thinking that there was no problem with this. After all, the applications worked perfectly on the developers’ i7-powered MacBook Pros so they should work fine for everyone, right?

Unfortunately, in the real world, not everyone is running the latest and greatest hardware. Hundreds of millions of people access the internet solely on older Android phones with slightly more processing power than a potato, through internet connections only a little faster than dial-up.

For these users, a huge JavaScript bundle takes forever to load, and even longer for their device to parse and run. Even in less extreme cases, there are countless users around the world who aren’t using the latest and greatest hardware. For them, massive JavaScript apps are usable (but painful).

Angular Ivy

The Angular Ivy renderer will help in several ways:

1. It is being written with an eye on efficiency, so it will accomplish the same tasks while executing far fewer CPU instructions. This will improve both the battery life and the sanity of users with less-than-powerful devices.
2. The renderer will be written in a much more modular fashion that the current renderer. This will make it much more amenable to tree-shaking and dead code elimination. As a result, your production JavaScript bundle will include only the code that is needed to run your application, instead of bundling together everything plus the kitchen sink as often happens with the current rendered.
3. In addition to the bundle-size reduction and improved rendering speed, Angular Ivy has another few quality-of-life enhancements for Angular developers. Rebuild times are significantly faster. So if you’re running your app in development mode and waiting for your changes to appear, you’re now going to be spending a lot less time waiting.
4. Template-type checking is improved, which means you’ll catch more errors at compile time instead of at runtime. Runtime template bugs are annoying, because they either bite you during testing, or they bite your users when they’re trying to use your app.
5. The Angular Ivy template compiler will generate code that is human readable, which the current View Engine compiler doesn’t do. This will come in handy when trying to track down tough template bugs.

The net result: smaller apps, faster apps, happier developers, and happier users.

Angular 9

Here is an overview of Angular 9.

Main highlights include:

• Built-in Angular Features
• Mature Development with Angular
• Understanding Angular View Engines
• Angular Ivy Solves Long-Standing Problems
• Angular Ivy and Mobile
• Selector-less Directives
• Angular Diagnostics Improvements
• Internationalization with Angular Ivy
• DI and Type-Safe in Angular 9
• Dependency Injection Changes in Angular Core
• Angular Benchmarks (Angular 8.2.7 vs. 9.0.0-next.5)

Angular 10

Angular Version 10.0.0 was released in late June 2020. A major release, Angular 10 includes changes such as a new date range picker in Angular Material, upgrading TypeScript versions, library version updates, and more.

New features include:

• Ngtsc Compiler Interface
• Configure Async Timeouts
• Stale Lock File Reporting
• Lazy Computation of basePaths
• Merging Translation Files
• Explicit Mapping

Angular 11

Angular version 11.0.0 was released in November 2020. The Angular 11 major release provides updates across the platform, including the CLI and components framework.

Significant features include:

• Faster Builds with TypeScript 4.0
• Component Test Harnesses
• ESLint Updates
• Updated Language Service Preview
• Updated Hot Module Replacement (HMR) Support
• Improved Reportings and Logging
• Automatic Font Inliining

Angular 12 Ivy Everywhere

New Features Inlcude:

• Nullish coalescing in Angular templates
• Documentation and video guide improvements
• Support for inline Sass in the styles field of the @Component decorator
• Running ng build now defaults to production
• Strict mode enabled by default in the CLI
• Ivy-based Language Service moved from opt-in to on by default
• Experimental support for Webpack 5
• Support for TypeScript 4.2

Deprecation of support for IE11

Angular 13

Angular 13 was release on November 3rd, 2021 with a plethora of new features and changes.

Noteworthy Changes Include:

• Ivy-based Features and Optimizations:

  • View Engine is no longer available in Angular v13.

  • Angular Package Format (APF) streamlined and modernized for faster compilation.

  • Quality of life improvements to dynamically create components using a simplified API.

• End of IE11 Support:

  • IE11 support removed in Angular v13 for leveraging modern browser features.

  • Applications will now be smaller sized, load faster, and over all provide an improved user experience.

  • Running ng update automatically drops IE-specific polyfills and reduces bundle size.

• Improvements to Angular CLI:

  • Default support for persistent build cache in new v13 projects, resulting in up to 68% improvement in build speed.

  • Performance improvements in ESBuild, supporting CSS sourcemaps and optimizing global scripts.

• Framework Changes and Dependency Updates:

  • RxJS 7.4 is now the default for new apps; existing apps need manual update to RxJS v7.4.

  • Support for TypeScript 4.4 introduced in Angular v13.

• Improvements to Angular Tests:

  • TestBed improvements for better teardown of test modules and environments.

  • Default configuration for faster, less memory-intensive, and more optimized tests.

• Accessibility (a11y) Enhancements:

  • Angular Material components evaluated to meet elevated a11y standards.

  • Touch target sizes for components like checkbox and radio button adjusted for better a11y.

  • Improvements to high contrast modes for multiple components.

• Other Notable Updates:

  • Support for inlining Adobe Fonts, building on the existing support for Google Fonts.

  • Documentation updates on angular.io for clearer insights into localization API with more API documentation for $localize.

Angular 14

On June 2nd, 2022, Angular 14 released with various feature improvements and changes.

• Standalone Components (Developer Preview):

  • Introduction of standalone components to streamline Angular application authoring.

  • Standalone components are in developer preview, allowing exploration and development.

  • Developer feedback encouraged through exploration and usage.

• Typed Angular Forms:

  • Strict typing implemented for the Angular Reactive Forms package in v14.

  • Type-safe values inside form controls, groups, and arrays across the entire API surface.

  • Incremental migration to typed forms supported with update schematics.

• Streamlined Best Practices:

  • New change detection guides on angular.io for building high-quality apps.

  • Improved page title accessibility with Route.title property in Angular Router.

• Extended Developer Diagnostics:

  • Introduction of extended diagnostics providing compile-time warnings with actionable suggestions.

  • Catching common templating errors, such as the "Banana in a box" error and nullish coalescing on non-nullable values.

  • Diagnostics configurable in tsconfig.json.

• Tree-shakeable Error Messages:

  • Addition of runtime error codes for easier debugging.

  • Allows build optimizer to tree-shake error messages from production bundles while retaining error codes.

• Built-in Improvements:

  • Support for TypeScript 4.7 and default targeting of ES2020.

  • Binding to protected component members directly from templates.

  • Optional injectors in embedded views for customizable dependency injection behavior.

  • NgModel OnPush support for reflecting changes in UI for OnPush components.

• Angular CDK and Tooling Improvements:

  • CDK Menu and Dialog promoted to stable.

  • New CDK primitives for creating accessible custom components.

  • hasHarness and getHarnessOrNull methods added to Component Test Harnesses.

• Angular CLI Enhancements:

  • Standardized CLI argument parsing for consistency.

  • Removal of deprecated camel case arguments support.

  • Introduction of real-time type-ahead autocompletion with ng completion.

  • ng analytics command for controlling analytics settings and printing analytics information.

  • ng cache command for controlling and printing cache information.

• Angular DevTools and Experimental ESM Application Builds:

  • Angular DevTools debugging extension now supports offline use and is available for Firefox.

  • Introduction of an experimental esbuild-based build system for ng build, compiling pure ESM output.

Angular 15

Angular 15 released Nov 16, 2022 and carried big improvements to the developer experience and performance.

• Standalone APIs Graduated:

  • Standalone APIs introduced in v14 are now part of the stable API surface.

  • Standalone components now entirely work in HttpClient, Angular Elements, router, and more.

  • Developers can now bootstrap an application using a single component with standalone APIs.

• Router and HttpClient Tree-shakable Standalone APIs:

  • New router standalone APIs enable the building of multi-route applications.

  • The provideRouter API is tree-shakable, resulting in an 11% reduction in router code size.

  • HttpClient also benefits from tree-shakable standalone APIs.

• Directive Composition API:

  • Enables enhancing host elements with directives for advanced code reuse.

  • Works with standalone directives and allows combining logic and inputs from multiple directives.

• NgOptimizedImage Directive Stable:

  • The Angular image directive is now stable.

  • Performance improvements observed, including a 75% improvement in LCP in a lighthouse lab test.

  • New features include automatic srcset generation and an experimental fill mode.

• Functional Router Guards:

  • Reduction of boilerplate in guards with functional router guards.

  • Guards can now be defined more concisely, improving readability.

• Router Unwraps Default Imports:

  • Router now auto-unwraps default exports when lazy loading standalone components.

  • Simplifies route declarations and reduces boilerplate.

• Better Stack Traces:

  • Improved stack traces in Chrome DevTools for better debugging.

  • Collaboration with Chrome DevTools to enhance error messages.

• Release MDC-based Components to Stable:

  • Refactoring of Angular material components based on Material Design Components for Web (MDC) is completed.

  • Enables closer alignment with Material Design specification and prepares for Material 3 adoption.

• Component Improvements:

  • Range selection support added to the slider.

  • Components now have an API to customize density for better flexibility.

  • Accessibility improvements in terms of contrast ratios, touch target sizes, and refined ARIA semantics.

• CDK Listbox:

  • The Component Dev Kit (CDK) introduces the CDK listbox as a customizable primitive for UI components.

  • Provides expected behaviors for an accessible experience based on the WAI ARIA listbox pattern.

• Experimental esbuild Support Improvements:

  • Experimental support for Sass, SVG template, file replacement, and ng build --watch with esbuild.

  • Users encouraged to try esbuild by updating builders in angular.json.

• Automatic Imports in Language Service:

  • Language service now automatically imports components used in templates but not added to components or NgModules.

• CLI Improvements:

  • Support for generating standalone components via ng g component --standalone.

  • Simplification of ng new output by removing test.ts, polyfills.ts, and environments.

• Community Contribution Highlights:

  • Contributions from over 210 people across framework, components, and CLI.

  • Highlighted contributions related to configuring default options for DatePipe and adding <link rel="preload"> tag for priority images during SSR.

• Deprecations:

  • providedIn: 'any' and providedIn: NgModule deprecated due to limited use and misuse patterns.

  • Deprecation of @angular/flex-layout with a focus on providing security and compatibility fixes for the next year.

Angular 16

Angular 16 is the largest release since the initial rollout of Angular. May 3rd, 2023 comes with major improvements to reactivity, server-side rendering, and tooling in addition to various quality of life features.

• Reactivity Model:

  • Developer preview of a brand new reactivity model.

  • Backward compatible and interoperable with the current system.

  • Improved runtime performance by reducing computations during change detection.

  • Clearer mental model for reactivity, indicating view dependencies and data flow.

  • Fine-grained reactivity for checking changes only in affected components.

• Angular Signals Library:

  • Introduction of a new signals library in @angular/core.

  • Allows defining reactive values and expressing dependencies.

  • Enables the creation of computed values and effects for reacting to changes.

• RxJS Interoperability:

  • Integration of a new RxJS interop package - @angular/core/rxjs-interop.

  • Conversion between signals and observables for easier interoperability.

• Server-side Rendering and Hydration:

  • Developer preview of full app non-destructive hydration.

  • Angular no longer re-renders the application from scratch, reducing flickering.

  • Improved Web Core Vitals and future-proof architecture for code loading.

• Improved Tooling for Standalone Components:

  • Migration schematics and standalone migration guide.

  • Standalone ng new collection for creating new projects.

  • Zone.js configuration options added via provideZoneChangeDetection.

• Advanced Developer Tooling:

  • Developer preview of esbuild-based build system for faster builds.

  • Integration of Vite in ng serve for the development server.

  • Experimental Jest support for better unit testing.

  • Autocomplete imports in templates for enhanced development experience.

• Improved Developer Experience:

  • Introduction of required inputs for compile-time error checking.

  • Passing router data as component inputs for enhanced routing.

  • CSP support for inline-styles to address Content Security Policy concerns.

  • Injectable OnDestroy for higher flexibility in lifecycle hooks.

  • Support for self-closing tags in Angular templates.

• Other Enhancements:

  • Support for TypeScript 5.0.

  • Removal of ngcc overhead.

  • Support for service workers and app shell in standalone apps.

  • Expanded CSP support in the CLI.

Angular 17

On Nov 8th, 2023, Angular ushers in a new era of performance and developer experience with a brand new look. Angular 17 introduces new features while bringing great improvements to other popular features.

• Deferrable Views:

  • Introduces deferrable views for enhanced performance and developer experience.

  • Offers up to 90% faster runtime and up to 87% faster builds.

  • Simplifies lazy loading with a declarative approach.

• Built-in Control Flow:

  • New block template syntax for optimized, built-in control flow.

  • Improves *ngIf, *ngSwitch, and *ngFor syntax for better developer experience.

  • Reduces runtime footprint and provides significant performance improvements.

• Built-in For Loop:

  • Introduces a built-in for loop for improved iteration through collections.

  • Up to 90% faster runtime compared to *ngFor in community benchmarks.

• Revamped Hybrid Rendering:

  • SSR and SSG brought closer to developers with a new prompt in ng new.

  • Hydration graduates from developer preview, enabled by default in new apps.

  • Introduction of a new @angular/ssr package for hybrid rendering support.

• Vite and esbuild as Default:

  • Vite and esbuild become default for new projects, offering faster build times.

  • Provides up to 87% speed improvement in ng build and 80% faster edit-refresh loop.

• Standalone APIs from the Start:

  • Standalone components, directives, and pipes enabled from the start.

  • Consistent learning experience and development practices for standalone APIs.

• Next Steps in Reactivity:

  • Angular Signals implementation graduates from developer preview.

  • Ongoing work on signal-based inputs, view queries, and more for improved developer experience.

• Quality of Life Improvements:

  • Experimental view transitions support for smoother DOM transitions.

  • Automatic preconnect in the image directive for better performance.

  • Defer loading of the animations module for reduced initial bundle size.

  • Input value transforms for flexible boolean input configuration.

  • Style and styleUrls as strings for a more intuitive styling approach.

Angular 18

Angular v18 has introduced several exciting features aimed at improving performance, developer experience, and flexibility. Prior to the release, we wrote a blog on Potential Angular 18 Features and Trends. Here are some of the key highlights:

• Material 3 and Theming: Angular Material 3 is now stable, allowing developers to easily customize themes. This feature helps refine the design and UI experience with better control over elements like color and typography.
• Deferrable Views: This feature is now stable, offering significant improvements in app performance, including faster load times and reduced bundle sizes by deferring parts of the UI until needed. For example, Bill.com saw a 50% reduction in their bundle size using this feature.
• Hydration and Server-Side Rendering (SSR): Angular 18 enhances server-side rendering with improved hydration capabilities, including i18n (internationalization) support. Partial hydration, introduced earlier, now allows developers to incrementally hydrate their apps for better performance.
• Debugging Enhancements: Angular DevTools now provides better insight into hydration processes and helps identify issues quickly, making it easier to debug applications.
• Forms and Control State Changes: A new property in Angular forms, called events, allows developers to track and respond to changes in form states, such as value updates and touch events, more effectively.
• Route Redirects as Functions: Angular v18 now supports using functions in route redirects, adding flexibility when dealing with dynamic routing needs.

These features continue to build on Angular’s reputation as a highly flexible and performant framework for modern web applications.

The Future of Angular

Angular receives numerous feature requests both from Google and the Angular community, with constant review and evaluation build their roadmap to prioritize requests.

The future of Angular is bright, with new feature developments on the horizon:

Better Developer Ergonomics with Strict Typing

Implementing a stricter type of checking for reactive forms allows developers to catch more issues during development time.

Reduce Framework Overhead

Removing legacy View Engine for the smaller Angular conceptual overhead (lower maintenance cost, lower complexity of codebase, and a smaller package).

Improved Text Times and Debugging

Automatic test environment tear down improves test time and creates better isolation across tests. The goal is to change TestBed to automatically clean up and tear down the test environments after each test run.

Optional NgModulars

Optional NgModulars allow developers to develop standalone components and implement an alternative API to declare the component’s compilation scope.

Support Directives to Host Elements

Adding directives to host elements allows developers to augment their components with more behaviors without inheritance.

Angular Compiler as a PlugIn (tsc)

When making this a reality, the developers substantially improve build performance and reduce maintenance costs.

Ergonomic Component Level Code-Splitting APIs

Web Applications are known for their slow initial load time. Applying a more granular code-splitting component level is one way to improve the initial load time. Are there features you wish were listed and aren't? Please share, and let's talk about the future of Angular and, if we ruled the world, what we would do to make it even brighter!

Angular’s Past, Present, and Future

If you’ve been using Angular from its early days all the way until now, then congratulations! While there have been plenty of rough patches, we’ve ended up with a fast, modern framework that is fun to use.

If you were an AngularJS developer but moved on to React, Vue, or something else, I encourage you to give Angular another look. It’s worth your time, even if you decide to stick with what you’re using now.

And if you’ve never used Angular at all, why not give it a shot?

We’ve just been on a whirlwind tour through Angular’s past, present, and future. Without a doubt, it has been quite a ride. Regardless of your Angular background, I hope you’ve enjoyed the tour!

What framework do you work with and why? If you have questions or comments be sure to enter them below.

Looking for framework-agnostic UI components? MESCIUS has a complete set of JavaScript UI components, including data grids, charts, gauges, and input controls. We also offer powerful spreadsheet components, reporting controls, and enhanced presentation views. We have deep support for Angular (as well as React and Vue) and are dedicated to extending our components for use in modern JavaScript frameworks.

Empower your development. Build better applications. Try MESCIUS' Tools for JavaScript and .NET!