Angular 2 (September 2016)
- Biggest Change: Rewritten from Scratch
- Angular 2 was a complete rewrite of the original AngularJS framework (Angular 1.x), with a focus on performance, modularity, and better tooling.
- The Component-based architecture replaced AngularJS’s controller and scope model.
- TypeScript: Angular 2 adopted TypeScript as the primary language, though it still supports JavaScript. TypeScript’s static typing and tooling support were key benefits.
- New Dependency Injection system was introduced, making it more flexible and easier to use.
- Improved change detection with the introduction of the zone.js library to track asynchronous operations.
- The introduction of RxJS (Reactive Extensions for JavaScript) to handle async operations and event-based programming in a more declarative way.
Angular 4 (March 2017)
- Simplification of Angular:
- Breaking changes from Angular 2 were minimal, as Angular 4 focused more on improving the framework than introducing major new concepts.
- The Angular Compiler (ngc) was improved for better AOT (Ahead of Time) compilation and tree shaking, which reduced bundle size.
- Angular CLI (Command Line Interface) improvements with better support for Angular Universal (server-side rendering).
- Animation Package became a separate module (making it smaller).
- TypeScript 2.1/2.2 support added, which brought better type checking and tooling support.
Angular 5 (November 2017)
- Build Optimization:
- Angular Compiler (AOT) improvements were continued, resulting in faster builds and smaller bundle sizes.
- HttpClient Module was introduced as a simpler and more powerful alternative to the existing HttpModule.
- Tree-shakable modules were added to the Angular ecosystem, ensuring that unused code is not included in production bundles.
- ng build added build optimization flags, making it easier to optimize the production builds.
- Service Worker support for Progressive Web Apps (PWA).
- Internationalization (i18n) improvements for better localization of Angular applications.
Angular 6 (May 2018)
- CLI & Package Updates:
- The Angular CLI was revamped with a focus on ease of use and new features.
- ng add: The CLI introduced the
ng addcommand to simplify adding external libraries and tools (like Angular Material). - Angular Elements: A new feature to allow Angular components to be used in non-Angular environments, like in Web Components.
- Angular Elements made it easier to encapsulate Angular components into native web components.
- RxJS 6: Updated to RxJS 6 with pipeable operators to encourage cleaner, more declarative code.
- ng update: The CLI added a tool to help you easily update dependencies and Angular itself.
Angular 7 (October 2018)
- Performance Enhancements:
- Virtual Scrolling and Drag-and-Drop support in Angular Material.
- Angular CLI became more efficient with build and test performance improvements.
- CLI prompts were added, which ask for user confirmation when making breaking changes or important configuration decisions.
- Improved accessibility support in Angular Material.
- Updates to Angular’s internal API and tooling, including the Compiler and Angular Language Service.
Angular 8 (May 2019)
- Differential Loading:
- Differential loading for modern browsers: Angular introduced the ability to serve two different bundles to different browsers: one for modern browsers that support ES2015+ features and one for older browsers (like Internet Explorer).
- Angular Ivy (Opt-in): Angular Ivy, a new rendering engine, was introduced as an experimental feature. Ivy promised to reduce bundle size, improve performance, and simplify the framework’s internals.
- Lazy Loading with Dynamic Imports: Angular 8 allowed better integration with dynamic imports and lazy loading of modules.
- Angular Elements became a stable feature.
- ng upgrade: Angular 8 also improved the upgrade process for migrating from AngularJS to Angular.
Angular 9 (February 2020)
- Ivy Rendering Engine (Default):
- The biggest change in Angular 9 was the Ivy Rendering Engine becoming the default. Ivy was designed to make Angular smaller, faster, and more efficient.
- Tree-shakable components: With Ivy, Angular components became tree-shakable by default, which significantly reduced the size of the final bundle.
- Improved debugging: Angular 9 introduced better error messages, better stack traces, and improved debugging tools.
- Faster builds: The new compiler reduced build times, especially for large applications.
- Type checking for templates: Angular now performs type checking on templates, helping to catch errors early in the development process.
Angular 10 (June 2020)
- Angular Material and CLI Updates:
- Strict Mode: Angular 10 introduced a stricter mode (
--strictflag) to enforce better coding practices and catch potential bugs earlier in the development cycle. - TypeScript 3.9 support: Angular 10 upgraded to TypeScript 3.9, which brought better performance and new language features.
- Deprecation of IE11 support: IE11 was officially deprecated as a supported browser.
- Warning for CommonJS Imports: Angular 10 introduced warnings for CommonJS dependencies in the build process, pushing developers towards ES module-based dependencies to improve build performance.
- Updated Angular Material: New components like Datepicker with better accessibility and additional features.
- Strict Mode: Angular 10 introduced a stricter mode (
Angular 11 (November 2020)
- Build and Performance Enhancements:
- Faster Builds: Angular 11 improved build performance with updates to Webpack and CLI.
- Automatic Component Inlining: Angular 11 introduced the ability to inline CSS for components to reduce the final build size and improve performance.
- Strict Templates: Angular 11 made template type checking stricter by default.
- Webpack 5 support: Angular 11 added support for Webpack 5, which includes improvements in build performance and caching.
- Improved error messages and debugging support.
Angular 12 (May 2021)
- Ivy Continued:
- Angular 12 improved the Ivy compiler further, with enhanced build performance and error handling.
- Strict mode by default: The CLI now includes stricter TypeScript and template checking as part of the default Angular project setup.
- ESBuild: Introduced ESBuild support for faster builds and minimized output size.
- Support for Webpack 5 was improved.
- CSS Improvements: Angular 12 added support for CSS Variables, improved styled components, and support for inline CSS.
Angular 13 (November 2021)
- Ivy and Angular Material Updates:
- View Engine Deprecation: Angular 13 marked the end of support for View Engine, with Ivy being the sole renderer moving forward.
- Improved support for Angular Material components and added new features like the
<mat-chip-list>component. - Angular CLI improvements, such as better build caching and optimizations for the build and test processes.
- TypeScript 4.4 support.
Angular 14 (March 2022)
- Standalone Components:
- The biggest feature of Angular 14 was the introduction of Standalone Components, which allowed components to be created without being part of a module. This helps simplify the Angular module system and makes it easier to create components and reuse them in other parts of the application.
- Typed Reactive Forms: Angular 14 brought typed reactive forms, improving type safety and the development experience.
- Error handling improvements: More descriptive and clearer error messages during development.
Angular 15 (November 2022)
- Standalone Components and Signals:
- Standalone components continued to evolve with Angular 15, offering more flexibility in creating components that don’t require a module.
- Signals API (early experimental feature for reactivity) to simplify state management and improve reactivity in Angular applications.
Angular 17 (November 2023):
Standalone Components (Enhanced):
- Standalone Components are now fully stable, making it easier for developers to build Angular applications without the need for
NgModules. This reduces boilerplate and improves flexibility, especially in smaller projects or micro-frontends. - Standalone components can now be declared directly in routes, making dynamic routing simpler and improving code reusability across different projects.
Improved Rendering and Change Detection:
- Significant performance improvements in Angular's change detection mechanism. Angular 17 introduces further optimizations to the Ivy rendering engine, resulting in faster UI rendering and improved application performance, particularly in complex applications with many dynamic views.
- Enhancements to the runtime performance of Angular applications, ensuring quicker initial load times and better handling of large applications.
Signals API (Stable):
- The Signals API, first introduced as an experimental feature in Angular 15, has been stabilized in Angular 17. This API simplifies reactive state management, allowing developers to handle state changes in a more declarative and lightweight manner.
- Signals provide a more intuitive way to manage application state without relying heavily on external libraries like RxJS, though RxJS is still fully supported for advanced use cases.
TypeScript 5.x Support:
- Angular 17 officially supports TypeScript 5.x, bringing enhanced type-checking, better support for modern JavaScript features, and improved tooling for developers.
- This update improves type safety across templates and reactive forms, ensuring fewer runtime errors and better development experience through stricter checks.
Performance and Build Optimization:
- Faster Builds: Angular 17 continues to focus on improving build times, reducing the time it takes to compile and bundle large applications. Updates to the Angular CLI and Webpack integrations contribute to this improvement.
- Tree-shaking and Lazy Loading: Angular 17 brings further optimizations to tree-shaking (removing unused code from bundles) and lazy loading. This makes production bundles smaller and faster to load, improving performance across devices and network conditions.
Enhanced Reactive Forms:
- Building upon Angular 14’s typed reactive forms, Angular 17 introduces further improvements in form validation, error handling, and type safety.
- Enhanced support for complex form controls with better developer feedback and more robust form APIs, making it easier to build dynamic and validated forms.
Angular CLI Enhancements:
- The Angular CLI is further enhanced with new features to help developers manage their projects more efficiently. This includes better build caching and optimization for incremental builds.
- New commands and options allow developers to quickly generate and manage standalone components and improve integration with modern web development workflows.
Deprecations and Breaking Changes:
- Deprecation of Older APIs: As Angular continues to move forward with Ivy as the default rendering engine, Angular 17 deprecates some older, legacy APIs from the View Engine. Developers are encouraged to use the more modern and efficient Ivy API.
- Strict Mode by Default: Angular 17 enforces stricter TypeScript and template checking by default, helping catch potential issues early during the development process.
Web Standards and Progressive Web Apps (PWAs):
- Angular 17 further enhances support for Progressive Web Apps (PWA), with better caching mechanisms and offline support. It also improves integration with Web Components, making it easier to build cross-platform applications that work in non-Angular environments.
- Angular's Service Worker and App Shell capabilities have been optimized to provide a more seamless offline experience for PWA users.
Standalone Components (Enhanced):
- Standalone Components are now fully stable, making it easier for developers to build Angular applications without the need for
NgModules. This reduces boilerplate and improves flexibility, especially in smaller projects or micro-frontends. - Standalone components can now be declared directly in routes, making dynamic routing simpler and improving code reusability across different projects.
Improved Rendering and Change Detection:
- Significant performance improvements in Angular's change detection mechanism. Angular 17 introduces further optimizations to the Ivy rendering engine, resulting in faster UI rendering and improved application performance, particularly in complex applications with many dynamic views.
- Enhancements to the runtime performance of Angular applications, ensuring quicker initial load times and better handling of large applications.
Signals API (Stable):
- The Signals API, first introduced as an experimental feature in Angular 15, has been stabilized in Angular 17. This API simplifies reactive state management, allowing developers to handle state changes in a more declarative and lightweight manner.
- Signals provide a more intuitive way to manage application state without relying heavily on external libraries like RxJS, though RxJS is still fully supported for advanced use cases.
TypeScript 5.x Support:
- Angular 17 officially supports TypeScript 5.x, bringing enhanced type-checking, better support for modern JavaScript features, and improved tooling for developers.
- This update improves type safety across templates and reactive forms, ensuring fewer runtime errors and better development experience through stricter checks.
Performance and Build Optimization:
- Faster Builds: Angular 17 continues to focus on improving build times, reducing the time it takes to compile and bundle large applications. Updates to the Angular CLI and Webpack integrations contribute to this improvement.
- Tree-shaking and Lazy Loading: Angular 17 brings further optimizations to tree-shaking (removing unused code from bundles) and lazy loading. This makes production bundles smaller and faster to load, improving performance across devices and network conditions.
Enhanced Reactive Forms:
- Building upon Angular 14’s typed reactive forms, Angular 17 introduces further improvements in form validation, error handling, and type safety.
- Enhanced support for complex form controls with better developer feedback and more robust form APIs, making it easier to build dynamic and validated forms.
Angular CLI Enhancements:
- The Angular CLI is further enhanced with new features to help developers manage their projects more efficiently. This includes better build caching and optimization for incremental builds.
- New commands and options allow developers to quickly generate and manage standalone components and improve integration with modern web development workflows.
Deprecations and Breaking Changes:
- Deprecation of Older APIs: As Angular continues to move forward with Ivy as the default rendering engine, Angular 17 deprecates some older, legacy APIs from the View Engine. Developers are encouraged to use the more modern and efficient Ivy API.
- Strict Mode by Default: Angular 17 enforces stricter TypeScript and template checking by default, helping catch potential issues early during the development process.
Web Standards and Progressive Web Apps (PWAs):
- Angular 17 further enhances support for Progressive Web Apps (PWA), with better caching mechanisms and offline support. It also improves integration with Web Components, making it easier to build cross-platform applications that work in non-Angular environments.
- Angular's Service Worker and App Shell capabilities have been optimized to provide a more seamless offline experience for PWA users.
Conclusion:
The major changes in Angular over time are:
- Angular 2: Complete rewrite with a component-based architecture, TypeScript support, and RxJS integration.
- Angular 4-5: Performance optimizations, tree shaking, and better support for Angular Universal (server-side rendering).
- Angular 6-7: Improvements in the Angular CLI, Angular Elements, RxJS 6, and performance enhancements.
- Angular 9: Introduction of the Ivy rendering engine as the default, making builds faster and reducing bundle sizes.
- Angular 12-15: Continued focus on performance, better CLI, improved error handling, and features like standalone components and typed reactive forms.
For developers, Ivy (Angular 9) and Standalone Components (Angular 14) were particularly significant changes that fundamentally reshaped how Angular applications are built and structured.
