Get Familiar With Angular And Its Versions

Introduction

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.

Angular 2

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

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.

Angular 4

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.

Angular 5

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.

• Offers Build Optimize tool included in the CLI. It makes applications lighter and faster by removing unnecessary code and reducing the size of the JavaScript bundles.

• 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.

Angular 6

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

Angular 7

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

Angular 8

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

Angular 9

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:

• Faster testing

• Improved Type Checking

• Improved Internationalization

• 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

Angular 10

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

Angular 11

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.

Angular 12

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

Angular 13

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

Angular 14

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

Conclusion

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!