From social media to eCommerce, online banking, and healthcare, billions of people worldwide are using the web and mobile apps for almost everything. These apps offer a seamless experience to perform our daily tasks. However, the question is how these apps offer such reliability and scalability. All thanks to the widely used frameworks like Angular that make it easy for developers to create top-notch, robust applications. If you aren’t aware of Angular, it’s time to dive into this article.
What is Angular?
Angular is a TypeScript-based free and open source framework used to develop enterprise Single-page Web Applications. The Angular platform includes:
A component-based framework to build scalable web apps.
A group of well-integrated libraries offering various features, including client-server communication, routing, forms management, and more.
A set of developer tools to deploy, build, test, and update the code.
With Angular, you can develop anything from single-developer projects to enterprise-level applications.
Angular Framework Versions
Angular has been around since October 2010 and has gone through several changes. In an attempt to interpret the Angular Framework journey, here are different versions of Angular along with their features.
Angular JS 1. X
It was released in October 2010 and is usually referred to as Angular JS 1. X or Angular 1. x
It was SPA focused framework
Supported Dart, DS5, or DS6 to compile codes
The last major version is 1.7.x
It is now in LTS (Long Term Support) mode
This framework was ideal for dynamic modeling and aimed to make it simpler for developers to create client-side web apps with the help of model-view-controller (MVC) and for testers to test applications by using model-view-ViewModel (MVVM) architectures.
It was released in September 2016 and is a complete rewrite of Angular JS 1. X
Angular 2 is a mobile-oriented framework and offers support for mobile/low-end devices
It supported TypeScript, ES5, or ES6 to compile codes
It was component-based instead of a controller
Used bootstrapmodule() function for process initialization
Supported up to Typescript 1.8
The code was rewritten as Angular JS was not designed to focus on mobile browsers and doesn’t support mobile applications. This framework provides all tools and techniques to build high-performing mobile applications with Angular CLI & Angular Mobile Toolkit.
Angular 3 was being developed in MonoRepo, which meant a single repo for everything. @angular/core, @angular/compiler, and @angular/router were in the same repo but had their own versions.
However, the Angular team decided to skip version 3 because they wanted to sync the angular version with the angular router version. There was a mismatch between @angular/core, @angular/compiler, and @angular/router libraries.
In Angular 2, the core and router versions were like this:
Now, the problem was that @angular/router was already in a 3. X version and releasing Angular 3 with its router on version 4 could have created confusion. To avoid this confusion, the team skipped the release of version 3 and released version 4.0.0 so that every major dependency in the MonoRepo is on the right track.
It was released in March 2017 and is an improved version of Angular 2 with better user interaction, faster reflexes, smoother results, and the least commotion on modules. Some new features that Angular 4 offers are:
Typescript 2.1 & 2.2 compatibility
Reduced the bundled file size, leading to an increase in the application performance
Better bug fixes alert
HttpClient is part of the @angular/HTTP module
Else block in *ngIf introduced. You can add the below code in the component template
instead of writing two ngIf for else:
*ngIf=”yourCondition; else myFalsyTemplate”
Animation features were separated from @angular/core to @angular/animation.
For email validation, you don’t need to write a pattern
Source maps for templates, offering contextual details while dealing with Crash Reports & Log-Messages and Browser Debugger.
It was released in November 2017 and had some major changes compared to Angular 4. This newer version made the Angular framework smaller, faster, and easier to use.
Compiler enhancement to make the development build faster. You can run this command ng serve/s — aot in the development terminal window to make the build faster.
Angular Universal State Transfer API and DOM Support.
HttpClientModule was introduced under @angular/common/http package.
The TypeScript was upgraded to 2.5.
Internationalized Number, Date, and Currency Pipes were introduced that eliminates the need for i18n polyfills.
New Router Life Cycle Events were added, including ActivationStart, ActivationEnd, ChildActivationStart, ChildActivationEnd, GuardsCheckStart, GuardsCheckEnd, ResolveStart, and ResolveEnd, allowing developers to track the router’s life cycle from running guards through activation completion.
It was released in April 2018. The major highlights of this Angular version were CDK (Component Development Kit), CLI (Command Line Interface) & the Material package update.
Supports upgraded TypeScript version 2.7
Tree Shaking feature made applications smaller by removing unused dependencies
Animation implementation no longer depends on the web animation polyfills, resulting in reduced bundle size and enhanced animation performance.
Two new angular CLI commands were added, including ng update and ng add.
Introduced Angular Elements, allowing to use angular components in other environments like the Vue.js application.
Improved decorator and error message scheme
It was released in October 2018 and was a significant release and expansion to the entire platform, including Angular Materials, Core Framework, Angular Documentation, and CLI. In addition, this release made Angular Framework more flexible and easier to use.
Drag and Drop module for free dragging, sorting within a list, animations, and transferring items between placeholders, previews, & lists.
Visual scrolling to load and unload items from the DOM depending on the visible areas of the list
New interfaces were introduced – DoBootstrap and UrlSegment to CanLoad
A new Compatibility Compiler (ngcc) was added
Supports TypeScript 2.9
A new pipe, KeyValuePipe, was introduced
CLI prompts got updated to version 7.0.2 with new features
Added support for Node 10
enable Shadow DOM v1 and slots new elements features were added
It was released in May’2019, with plenty of improvements in workflow and performance. The major upgrade that Angular 8 got was a preview version of Ivy. Angular 8 is mainly focused on Differential loading, Dynamic imports for lazy routes, web workers, and Angular Ivy as opt-in support.
Some of the features that were introduced in Angular 8 are:
Advancement to ngUpgrade made it easier for Angular developers to upgrade their apps from Angular JS to Angular 8.
Supports TypeScript 3.2
Added support for Sass
An ng-new command was added to build the project with Bazel
Web workers to speed up an app during CPU-intensive processing
Use image-based cache for windows BuildKite
Dynamic Imports for Route Configurations
Added pathParamsOrQueryParamsChange mode for runGuardsAndResolvers in the Router
Added a Navigation Type Available during Navigation in the Router
It was released in February’2020 and affected the entire platform, including the framework, components, Angular Material, and the CLI. This Angular version is different from previous versions in many aspects. In this, all applications are moved to use the Ivy compiler and runtime by default, offering various benefits, such as:
Improved Type Checking
Improved CSS class and style binding
Improved build errors
Better debugging, and more
Some other features that Angular 9 offers are:
Support TypeScript 3.7
Added fullTemplateTypecheck flag for the compiler to check within the template
strictTemplates flag for a compiler to apply the strictest Type System rules for type checking
Improved build times by enabling AOT on default
Introduced Angular Material New Component – Youtube player component and Google Maps component
Framework’s core acceptance is approximately 40% faster due to the implementation of TestBed in Ivy
Improved CSS class and style binding
Selector-less directives in Ivy
Improved Internationalization (i18n) to balance the drawbacks without losing performance
It was released in June 2020 and is a synchronized major release with Angular CLI 10 and angular Material 10.
Date Range Picker – A New Angular Material Component was added, allowing users to select dates from the calendar
Supported TypeScript 3.9
TSLib updated to version 2.0
TsLint updated to version 6
Dependency packed with CommonJS could lead to larger, slower applications. So, warning about CommonJS imports were introduced to warn developers about the build getting pulled Into the bundles
New default browser configuration to outdo older and lesser used browsers
Optional Stricter settings to offer a more strict project setup
Implementation of Ngcc to reduce the file size of the entry-point
The CanLoad guard can return to Ultree, canceling the cutting-edge navigation and helping to redirect
It was released in Novemeber’2020 with a few popular bug fixes and some good features.
Some of the features of Angular 11 are:
Stricter types were added for DataPipe and number pipes to catch misuses such as passing an array or Observable
Supported TypeScrript 4.0
TSLint deprecated, with project creators recommending migration to ESLint
New initialNavigation options were added to legacy functionality
Usage of ngDevMode to tree-shake error messages for improving router performance
Removed Support of IE9/IE10 and IE Mobile
Experimental webpack 5 support
ISO week-numbering year formats support was added to formatDate.
It was released in May 2021 with some amazing features. The highlight of this Angular version was Added Tailwind CSS support. Some of the features of Angular 12 are:
Deprecated View Engine to make Ivy Everywhere a reality
Supports TypeScript 4.2
The message-ID format became more robust and resilient in Angular 12 to overcome the issues related to whitepapers, the organizing formats, and ICU expressions utilization in the i18n framework
Default Strict mode enabled in CLI for developers to catch bugs at an early stage
Nullish Coalescing operator to write cleaner codes for conditionals
Enhanced support for Hot Module Replacement (HMR)
Refined and fine-tune control in routerLinkActiveOptions
Enhanced logging and reporting due to CLI readability
BrowserAnimationsModulewithconfig to disable animations
Production-ready support for Webpack 5
It was released in November 2021 with several essential updates. Let’s get to know about them below:
Supports TypeScript 4.4
Angular TestBed enhancement to tear down test environments and modules after every test
No longer support for IE 11
No more support for View Engine. Angular 13 is 100% Ivy
Ergonomic code-splitting APIs and granular code disruption at a component level reduce the app loading time
Accessibility improvements for angular material components
The new release of ESBuild supports other framework languages like Vue, Svelte, and Elm
Dynamically enable/disable validators
Angular CLI enhancements increase development speed by 68%
RxJS 7.4 has become the default for the apps created with ng new. Current applications utilizing RxJS v6.x will need to update manually using the npm install [email protected] command
Restore history after canceled navigation
It was released in June 2022 and is the latest version of the Google-developed framework. It is one of the most pre-planned upgrades of Angular that includes typed reactive forms, CLI auto compiled, directives, and a developer preview of standalone components. Some of the aspects of Angular 14 are:
Standalone Components to make the development process easier
TypeScript enforces a strict form of types on your forms
Angular CLI Auto-Completion to offer provides auto-completion for Angular command line interface (CLI) commands
Enhanced template diagnostics that highlight errors for developers through compiler reconciliation to typescript code
Streamlined Page Title Accessibility to customize the title tag of your pages
Angular DevTools debugging extension is under Mozilla’s Add-ons for Firefox users
Extended Developer Diagnostics
As you have seen, the Angular framework is constantly growing with better features and faster performance; you should definitely use it to build high-quality web and mobile apps. And if you’re planning to leverage the benefits of the Angular framework, being aware of these features and migrating your solutions to the latest version will offer your users a seamless experience, resulting in your business growth.
Need support to migrate your application to the latest Angular version? Get in touch with us today!