Angular History

TABLE OF CONTENT

Angular JS to Angular 8, Angular Version History, Angular Version List, All Angular Versions
Angular 6 Logo

Big News !!! Angular 6 is Released, find here important angular 6 features 

Overview

Angular is a platform that makes it easy to build applications with the web. It combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. In this post, you will get brief information of angular version history.

So far Angular Team has released the following Angular versions.

Angular JS 1.x

  • AngularJS usually referred to as “Angular.js” or Angular 1.x
  • It is a JavaScript-based open-source front-end web application framework.
  • It is mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.
  • It aims to simplify both the development and the testing of applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.

It was initially released in Oct 2010 (7 years ago).

  • Angular JS code is written in JavaScript
  • Last major version release was : 1.7.x
  • Angular JS is now in Long Term Support(LTS) mode.

Official Site : https://angularjs.org/

Angular 2

Angular 2 is a complete rewrite from the same team that built AngularJS.

It is written entirely in TypeScript.

Angular 1.x was not built with mobile support in mind, where Angular 2 is mobile oriented.

It was released in September 2016.

It provides more choice for languages. You can use any of the language from ES5, ES6, TypeScript or Dart to write Angular 2 code.

Official Site : https://angular.io/

Info :

Find here the difference between Angular JS and Angular 2+

Angular 3

Angular 3 was skipped.

Reason behind this is that version mismatch between @angular/core, @angular/compiler  and @angular/router libraries.

For Angular 2 version for core and router is like this

  • @angular/core                      v2.3.0
  • @angular/compiler              v2.3.0
  • @angular/compiler-cli         v2.3.0
  • @angular/http                       v2.3.0
  • @angular/router                   v3.3.0

Now the problem is with the @angular/router, which is already in a 3.X version. and that’s because of some active and huge developments on the router section, like route-preload.

Now releasing Angular as version 3, with it’s route on version 4 will create confusion

To avoid this confusion they decided to skip the version 3 and release with version 4.0.0, so that every major dependency are on the right track.

Angular 4

  • Angular 4 was released in March 2017.

This release is backwards compatible with 2.x.x for most applications.

There is no major change in Angular 4 from Angular 2.

Angular 4 is not a complete rewrite of Angular 2

Angular team has laid emphasis on making angular apps more faster, compact .

  • Under the hood changes: New changes reduced the size of the generated code for your components by around 60% in most cases.
  • Faster Compilation
  • Better Bug fixes Alert.

Some Changes from Angular 2 : 

  • Animations being pulled out of @angular/core so as to remove the extra code being imported into our production bundle. Though you can easily add animation by importing {BrowserAnimationsModule} from @angular/platform-browser/animations into NgModule.
  • Renderer 2 in place of Renderer from same ‘@angular/core’.
  • *ngIf/else : Now you can use else clause as well .
  • No need to write a pattern for email validation in Angular 4.
  • TypeScript 2.1 and 2.2 compatibility: Finally We can use typescript 2.1 or more earlier only upto typescript 1.8 was supported.

Angular 5

Angular 5 was released in November 2017.

Here’s a breakdown of some of the biggest changes in v5.

Following are the important Angular 5 features :

  • Build Optimizer: production builds created with the Angular CLI will now apply the build optimizer by default.
  • Angular Universal State Transfer API and DOM Support.
  • Compiler Improvements
  • Internationalized Number, Date, and Currency Pipes

HttpClient : @angular/http is deprecated in Angular 5. It is replaced with @angular/common/http library.

HttpModule is not more use in Angular 5. It is replaced by HttpClientModule of @angular/common/http library in each of your modules, inject the HttpClient service, and remove any map(res => res.json()) calls, which are no longer needed.

Angular CLI v1.5 will generate v5 projects by default.

  • Angular Forms adds updateOn Blur / Submit
  • RxJS 5.5 support

New Router Lifecycle Events : GuardsCheckStart, ChildActivationStart, ActivationStart, GuardsCheckEnd, ResolveStart, ResolveEnd, ActivationEnd, ChildActivationEnd

Angular 6

Angular 6.0.0 was released on May 2018. It was released with Angular CLI 6 and Material 6.

Starting from this version angular team has synchronized the framework packages (@angular/core, @angular/common, @angular/compiler, etc), the Angular CLI, and Angular Material + CDK to version 6.0.0

Refer Angular 6,  Angular CLI 6 and Material 6 Features here.

Important Features Released in Angular 6, Angular CLI 6 and Angular Material 6 are

  • Two new angular cli commands added : ng update and ng add
  • Angular Elements
  • Component Dev Kit (CDK)
  • Angular Material Starter Components
  • CLI Workspaces
  • Schematics
  • Library Support
  • Tree Shakable Providers
  • Animations Performance Improvements
  • RxJS v6

For more detail information of each feature refer to Angular 6, CLI 6 and Material 6 Features and angular 6 blog by Stephen fluin.

Angular 7

Angular 7.0.0 was released on Oct 2018, synchronized released with Angular CLI 7 and Angular Material 7.

It is released with performance improvements and some interesting features like CLI Prompts, Virtual Scrolling, and Drag and Drops.

Important Features Released in Angular 7, Angular CLI 7 and Angular Material 7 are

  • CLI Prompts: The CLI will now prompt users when running common commands like ng new or ng add @angular/material to help you discover built-in features like routing or SCSS support. CLI Prompts are also added in Schematics.
  • Bundle budgets in CLI.
  • Angular Material & CDK
    • Virtual Scrolling
    • Drag and Drop
  • Content Projection support in Angular Elements
  • Dependency updates :
    • TypeScript 3.1
    • RxJS 6.3
    • Added support for Node 10

For more detail information of each feature refer to version 7 of Angular by Stephen fluin.

Angular 8

Angular 8 is released in May 2019. synchronized released with Angular CLI 8 and Angular Material 8.

Important Features Released in Angular 8, Angular CLI 8 and Angular Material 8 are

  • Differential Loading by Default: It is a process by which the browser chooses between modern or legacy JavaScript based on its own capabilities.
  • Dynamic Imports for Route Configurations.
  • Builder APIs in CLI: It is an exciting feature, using this we can customize angular CLI commands like ng build, ng test,and ng run.
  • Workspace APIs in the CLI
  • Web Worker Support
  • Angular CLI 8.3.0 has added new UX for an initial app created using ng new.
  • ng deploy is added in Angular CLI 8.3.0

For more detail information of each feature refer to version 8 of Angular by Stephen fluin.

Angular 9

Angular 9 is released in Feb 2020. It is the synchronized major release with Angular CLI 9 and Angular Material 9.

Angular 9 came up with the most awaited Ivy compiler.

Important Features Released in Angular 9 are :

  • Ivy Compiler: From version 9 all applications are moved to Ivy compiler and runtime by default. (In angular 8 it was in opt-in mode). It provides the following advantages
    • Smaller Bundle Size
    • Faster Testing
    • Better Debugging
    • Improved CSS class and style binding
    • Improved Type Checking
    • Improved build errors
    • Improved build times, enabling AOT on by default
    • Improved Internationalization
  •  New Options for providedIn property in @Injectable Decorator, In addition to the previous root and module options, you have two additional options.
    • platform : Specifying providedIn: 'platform' makes the service available in a special singleton platform injector that is shared by all applications on the page.
    • any : Provides a unique instance in every module (including lazy modules) that injects the token.
  • Component harnesses
  • Angular Material New Component
    • Youtube player Component 
    • Google Maps Component
  • TypeScript 3.7 Support 

For more detailed information of each feature refer to Version 9 of Angular Now Available — Project Ivy has arrived! by Stephen fluin.

Angular 10

Angular 10 is released in Jun 2020. This is a smaller release comparison to other major releases because of just a four-month time from the previous major release v9.

It is the synchronized major release with Angular CLI 10 and Angular Material 10.

Important Features Released in Angular 10 are :

  • New Angular Material Component
  • Warnings about CommonJS imports: When you use a dependency that is packaged with CommonJS, it can result in larger slower applications. Starting with version 10, we now warn you when your build pulls in one of these bundles.
  • Optional Stricter Settings
  • TypeScript 3.9
  • TSLib has been updated to v2.0
  • TSLint has been updated to v6
  • New Default Browser Configuration

For more detailed information of each feature refer to Version 10 of Angular Now Available by Stephen fluin.

Angular 11

Angular 11 is released in Nov 2020. This version is released with a few popular bug fixes and some good features.

Popular bug fixes :

  • RouterLink: incorrect relative link if defined in component having empty path [#13011]
  • FormGroup & FormControl statusChanges are not emitted on creation [#14542]
  • i18n: Able to use translation strings outside a template[#11405]

Important Features Released in Angular 11 are :

  • Automatic font inlining: During compile time Angular CLI will download and inline fonts that are being used and linked in the application. Which will make the application more faster.
  • Improved build and serve Reporting & Logging
  • Updated language service preview based on Ivy
  • Updated Hot Module Replacement(HMR) Support:

    Angular CLI has now added to support of serving application with HMR. 

    Use  ng serve --hmr

  • Faster Builds
  • Experimental webpack 5 support

Deprecation

  • TSLint is deprecated by the project creators who recommend migration to ESLint. That’s why TSLint and Codelyzer are deprecated version 11.

    Check out the official project page for a guide to incorporate angular-eslint in a project and migrate from TSLint.

  • Removed Support of IE9/IE10 and IE Mobile.

For more detailed information of each feature refer to Version 11 of Angular Now Available by Mark Thompson.

Angular 12

Angular 12 is released in May 2021. This version is released with cool features, the best one is Added Tailwind CSS support.

Important Features Released in Angular 12 are :

  • Passing context to HTTP Interceptors : No more dirty hacks for passing metadata to HTTP interceptors. Check out this article to know how to use it.
  • Now Supports inline Sass in styles property of @Component decorator
  • Added support of Tailwind CSS: Now you just need to install tailswindcss package and add tailwind.config.js to use tailwind CSS.
  • Nullish Coalescing: power of nullish coalescing is now also available on Angular templates in v12!
    /* Without Nullish Coalescing */
    {{age !== null && age !== undefined ? age : calculateAge() }}

    /* With Nullish Coalescing &/
    {{ age ?? calculateAge() }}
  • Strict mode is enabled by default
  • The Ivy-based Language Service is moving from opt-in to on by default.
  • Production-ready support for Webpack 5 is available now.

Deprecated support for IE 11.

For more detailed information on each feature refer to Angular v12 is now available.

Angular 13

Angular 13 is released in Nov 2021. Angular continued moving forward with the Ivy. 

Important Features Released in Angular 13 are :

  • Creating dynamic components is easy now :

    This is one of the best features released in this version. Previously we need to write so much boilerplate code for creating a dynamic component.

    The new API removes the need for ComponentFactoryResolver being injected into the constructor. Ivy creates the opportunity to instantiate the component with ViewContainerRef.createComponent without creating an associated factory.

  • IE 11 support is removed
  • Angular now supports the use of persistent build cache by default for new v13 projects, which results in 68% improvement in build speed.
  • RxJS 7.4 is now the default for the new apps. 
  • Supports TypeScript 4.4
  • Accessibility improvements for angular material components
  • Dynamically enable/disable validators
  • Restore history after canceled navigation

For more detailed information on each feature refer to Angular v13 is now available.

Summary

As you have seen above Angular is constantly growing with better features and faster performance.

In upcoming versions, more exciting features are coming like Ivy renderer, and Bazel which are currently in opt-in previews

For the detailed angular versions updates and changes refer to the angular changelog.

Provide your valuable feedback and suggestions in below comment section 🙂

Get Started