Angular Evolution: Updates, Tools & Community Growth

Angular, the popular Javascript framework, has continually evolved to meet the changing requirements of the digital world. Originally known as AngularJS, a frontend development framework created by Google in 2009, Angular underwent several transformations to streamline dynamic web app development. However, it was completely rewritten in 2010 and transformed into Angular. Angular brought new features, libraries, and tools, creating a mark in the web development landscape. This blog will take you through the fascinating journey of the Angular ecosystem’s evolution, focusing on the key updates in its tools, libraries, and communities.

Angular 2

The Angular community on GitHub contributed immensely to ensure a smooth transition between AngularJS and Angular 2. Their contributions span across 189 repositories comprising aspects like builds, components, documentation, tooling, testing, and more. Furthermore, the community also developed and integrated several tools and libraries that expanded its capabilities:

TypeScript adoption: Angular 2 adopted TypeScript 1.8, used it to rewrite AngularJS, and transformed it into Angular 2.
OOP features: Adopting TypeScript allowed Angular developers to use object-oriented programming (OOP) features and type safety to improve code reliability and maintainability.
Support for new programming languages: This version also supported programming languages like Dart, ES5, and ES6.

Angular 4

The Angular community introduced several advanced changes to Angular 4. They moved directly to Angular 4 to maintain the alignment of version numbers across all ng modules. Furthermore, they developed new features and rectified tricky issues related to Components, CLIs, and more for better functionality. Not only that, but they also maintained thorough documentation of those fixes and updates and developed comprehensive guides to instruct developers on the new features. Here’s an update on the latest tools and libraries added and updated in Angular 4:

New testing framework: In this version, Angular introduced a testing framework that reduces the testing time by half.
Latest TypeScript version support: It also started supporting TypeScript 2.1 and 2.2.
JIT compilation support: The framework also started supporting Just-In-Time (JIT) compilation to decrease bundle sizes.

Angular 5

In Angular 5, the community worked directly on improving the Angular framework. They addressed several issues, enhanced several features, integrated major tools, and maintained thorough documentation for better functionality and stability of Angular. Furthermore, they enhanced codes, tooling, and integration, which included:

Default build optimizer: In Angular 5, production builds developed using Angular CLI use the build optimizer by default.
New tools: It added better testing tools, built optimizations, and code generations.
Latest RxJS integration: The framework integrated RxJS 5.5 for improved management of asynchronous operations and event-based programs.

Angular 6

For Angular 6, the community greatly focused on integrating RxJS and reactive programming. The following features, libraries, and tools were duly integrated for robust app development:

New CLI commands: This version added the following CLI commands — ng update and ng add for simplified web app development.
Added built-in functionalities: Angular offers built-in functionality for animations, HTTP services, and material components.
New additions: It also added a Component Development Kit (CDK) for Angular Elements, RxJS v6, starter components for Angular Materials, tree-shakable providers, and workspaces for CLI.

Angular 7

From Angular 7 to 9, the community put together a collaborative approach in Request for Comments (RFC) that brought new features, libraries, and tools. The Angular 7 version added CLI prompts, drag & drop, and virtual scrolling for enhanced user interaction. Furthermore, it also added speed enhancement functionalities.

Angular 8

Default differential loading: Angular 8 added default differential loading to let the browser decide to load current/legacy JavaScript.
Dynamic import support: It also supports dynamic imports for route configurations.
Modern APIs: Angular also added APIs for workspaces and Builder APIs in the CLI and Web Worker Support.

Angular 9

Ivy functionalities: Angular 9 enabled the default use of Ivy Compiler and Runtime in every application. This brought forth better type checking, enhanced Internationalization, default Angular Ahead-of-Time (AOTs), improved debugging, optimized class and style binding in CSS, lessened build errors, reduced bundle size, and quicker test completion.
New Angular Material Components: Angular 9 included Google Maps and YouTube player components in Angular Material.
Modern TypeScript version support: This version also started supporting TypeScript 3.6 and 3.7.
New default compiler: Angular started using Ivy Renderer as the default compiler for applications.

Angular 10

From Angular 10 to Angular 12, the development community focused on Ivy Compiler and Renderer. They identified bugs, developed mitigation strategies, and addressed them for a highly powerful Ivy Compiler and Render. However, they also upgraded the framework with new features, libraries, and tools. In its tenth version, Angular provided CommonJS import warnings and optional stricter settings. Furthermore, it started supporting TypeScript 3.9, TSLib 2.0, and TSLint v6.

Angular 11

Automatic font inlining: In its eleventh version, Angular introduced automatic font inlining, where Angular CLI downloads and inlines fonts linked and utilized in applications during compilation.
Webpack 5 and HMR support: It also provided support for experimenting with Webpack 5 and updated the support for HMR (Hot Module Replacement).
Enabled ng serve —hmr: Angular also enabled dedicated Angular developers to use ng serve —hmr for faster web app development.

Angular 12

Focus on Ivy: Angular 12 completely focused on Ivy’s compilation and rendering pipeline.
Added workarounds: In this version, Angular introduced workarounds to deliver info to HTTP interceptors.
Tailwind CSS and in-line Sass support: It also enabled tailwind CSS support for using Tailwind CSS and in-line Sass in the @Component decorator’s style fields.
Strict mode: Angular 12 also enabled its strict mode in its CLI by default.
Modern TypeScript and Webpack version support: Moreover, it supported TypeScript 4.2 and Webpack 5.37.
DevTool access: Angular allowed access to Angular DevTools for Google Chrome after a few days of the release.

Angular 13

From versions 13 to 17, the Angular community has dedicated their skills to expanding the scope of Angular applications. They identified areas of improvement, integrated and upgraded libraries and tools, and implemented new features to enhance the core framework and its functionality.

Latest TypeScript and NodeJS support: Angular 13 started supporting TypeScript 4.4 and NodeJS 16.14.2.
Adobe Fonts inline support: It enabled inline support for Adobe Fonts for improved First Contentful Paint (FCP) score.
New API: It introduced a new API that streamlined the creation of dynamic components. Rather than using a ComponentFactoryResolver into the function Object() {[native code]}, web developers can use the Ivy-provided ViewContainerRef.createComponent option to instantiate components without creating factories.
Utilization of modern browser features: Due to the removal of the IE11 support, Angular can use native web APIs to implement modern browser features like CSS variables and web animations.
Default build-cache and RxJS support: It also started supporting the default use of build-cache and RxJS 7.4 for new web application development projects.

Angular 14

Latest TypeScript support: Angular 14 introduced a complete array of new features and functionalities for developers. It started by supporting the latest TypeScript version 4.7.
Standalone components: It also introduced the concept of standalone components that do not require any association with modules.
Strict typed forms: It introduced strictly typed forms to address the GitHub issue (strict typing execution for the Angular reactive forms package).
CLI auto-completion: It also introduced CLI auto-completion, which creates components, directives, and modules by delivering specific commands to improve productivity.
Improved built-in functionality: Angular 14 enables its CLI to publish smaller codes without updating and directly connects protected components from your templates.
Template diagnostics: Angular also introduced enhanced template diagnostics that deliver compile-time warnings and insights into your templates for improvements.
Title accessibility: It enabled developers to add a web page title without requiring Route.title property (in Angular Router) or any extra imports.
Stabilized CDK primitives: Angular 14 also stabilized the CDK Menu, and Dialog found in the Angular Component Dev Kit (CDK).
Offline devtools usage: Developers can use the Angular DevTools debugging plugin offline and find it in Mozilla’s Add-ons.
Newly added injectors: Plus, developers can use TemplateRef.createEmbeddedView and ViewContainerRef.createEmbeddedView to offer option injectors while developing an embedded view in Angular 14.

Angular 15

New APIs: Angular 15 introduced stable standalone APIs and directive composition APIs. The former allows developers to build applications, eliminating the need for Ng modules. Conversely, the latter allows an Angular developer to add directives to host elements for efficient code reusability.
Extended Esbuilt support: Furthermore, Angular extended its esbuild support by delivering file replacement, ng build –watch, and save as SVG template.
Stabilized components and directives: It also stabilized the Ngoptimized Image Directive and Material Design Components (MDCs).
Introduced Stack Trace: Angular introduced Stack Trace to trace codes and errors simply and efficiently.

Angular 16

Angular Signals: Angular 16 introduced a new library feature – Angular Signals. Developers can use Angular Signals to specify reactive values and establish dependencies between them. Signals address the default change detection issue posed by ensuring that change detection occurs at a component level on the change of associated components. This provides improved change detection, streamlined updates, and optimized application performance.
DestroyRef: DestroyRef is a new provider introduced in Angular 16. It enables destroy callback registration for precise lifecycle scopes. Furthermore, it offers a simplified method of cleaning up operations when the provided entities are destroyed. Hence, DestroyRef ensures optimized resource management during Angular app development.
esbuild Developer Preview: Angular’s new JavaScript bundler, EsBuild, ensures faster build times and efficient Angular development processes. Furthermore, it can now be used with Vite for development.
Hydration developer preview: Hydration refers to restoring server-side rendered applications on the client side. Hydration comprises a long list of sub-processes, including persisting of application state, reusing server-rendered DOM structure, transfer of server-retrieved application data, and more. Angular 16 made hydration default in new applications using SSR.
takeUntilDestroyed(): Angular 16 introduced a new RxJS operator – takeUntilDestroyed(). It easily ties the life cycles of an Observable and a particular component.

Angular 17

Built-in control flow: Angular 17 introduced the concept of built-in control flow that exists in built time. It is an intuitive ergonomic syntax closer to JavaScript, requiring fewer documentation lookups. Developers can find the built-in control flow in their templates without extra imports. The built-in control flow tool ensures better type checking for enhanced type narrowing. It also significantly decreases runtime footprint and bundle size for better Core Web Vital scores. Furthermore, it improves application performance.
Deferrable views: Angular 17 added a new feature called deferrable views. This feature is more advanced than the traditional lazy-loading feature. It enables Angular developers to define a set of circumstances when specific elements and components should load. Deferrable loads ensure enhanced loading time, lesser resource consumption, and improved user experiences.
SSR enhancement and the new @angular/ssr package: Angular 17 offers enhanced server-side rendering (SSR) support for optimized performance and Angular Universal compatibility. Angular developers will find an a –ssr switch while developing a new application using ng new. On the other hand, if ng new is not used, Angular seeks permission to set up SSR. If developers want to enable SSR later in the development process, they can add the @angular/ssr package (sourced by the Angular community) with ng add @angular/ssr.
Latest TypeScript and Node version support: Angular 17 now supports the latest versions of TypeScript and Node – TypeScript 5.2 and Node 18.13. Therefore, developers can utilize the latest features and functionalities of TypeScript and Node for advanced Angular development projects.
Vite and esbuild made default: In version 16, Angular introduced a developer preview of the esbuild plus Vite build system. After much experimentation, the system improves 67% of the application build time. In version 17, Angular ensured all new applications would have Vite and esbuild as their default build system.

Also read : Angular vs. React: Which is better for App Development?

Conclusion

The evolution of Angular is not only about technical advancements but also a tribute to the hard work and dedication of thousands of diverse developers who have made it a powerful framework. Angular will bring exciting features and integrate advanced libraries and tools in its upcoming versions, creating a great development environment and experience for its developers. So stay tuned to get the latest updates on Angular.