Difference between Angular versions
Tags: angular, javascript, programming
Published: 2021-12-11 09:25:09

Difference between angular versions till 11th Dec 2021. 
Until now Angular Version 13 released.

## Angular Js

1. It is referred as Angular 1 version.
2. It aim's to simplify the development and testing of application by providing MVC(Model-View-Controller) and MVVM(Model-View-View-Model) architectures.
3. It's written in `Javascript`


## Angular 2
1. Angular 2 totally rewritten and used typescript.
2. It's supported in mobile.
3. You can write in ES6, JS or in Dart.


## Angular 3
This version is skipped due to mismatch of @angular/core, @angular/compiler  and `@angular/router` libraries.

`@angular/router` was already version 3.x with huge development. So to avoid the confusion they skipped this version.


## Angular 4
1. Reduced the size up to 60%
2. Faster compilation
3. Better bug fix alerts.
4. Supported typescript 2.1 and more. (Earlier it was supporting typescript 1.8)
5. No need to write a pattern for email validation. 
6. `*ngIf/else` Now you can use `else` as well .
7. Renderer 2 in place.
8. 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`.


## Angular 5
1. Compiler Improvements
2. RxJS 5.5 support (Added new router life cycle events)
3. Angular Forms adds `updateOn` Blur / Submit
4. Angular Universal State Transfer API and DOM Support.
5. By default enabled `Build Optimiser`.
6. Internationalised Number, Date, and Currency Pipes
7. `@angular/http` replaced with `@angular/common/http` library.
8. `HttpModule` is replaced by `HttpClientModule` of `@angular/common/http` inject the HttpClient service, and remove any `map(res => res.json())` calls, which are no longer needed.

## Angular 6
1. Its released with Angular CLI 6.X and Angular material 6.X
2. Add `ng update` and `ng add`
3. Angular Elements
4. Component Dev Kit (CDK)
5. Angular Material Starter Components
6. CLI Workspaces
7. Schematics
8. Library Support
9. Tree Shakable Providers
10. Animations Performance Improvements
11. RxJS v6

## Angular 7
1. Its released with Angular CLI 7.X and Angular Material 7.X
2. Performance improvements
3. Virtual scrolling
4. Drag and drops
5. Content projection support in angular element
6. **Dependency updates** :
     TypeScript 3.1
     RxJS 6.3
     Added support for Node 10
7. Bundle budgets in CLI.
8. **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.

## Angular 8
1. Its released with Angular CLI 8.X and Angular material 8.X
2. **Differential Loading by Default:** It is a process by which the browser chooses between modern or legacy JavaScript based on its own capabilities.
3. Dynamic Imports for Route Configurations.
4. 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`.
5. Workspace APIs in the CLI
6. Web Worker Support
7. Angular CLI 8.3.0 has added new UX for an initial app created using ng new.
8. `ng deploy` is added in Angular CLI 8.3.0

## Angular 9
1. It came up with most awaited IVY Compiler.
2. 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 Internationalisation

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

4. Angular Material New Component
     Youtube player Component 
     Google Maps Component
5. TypeScript 3.7 Support 

## Angular 10

1. Its synchronised with major release Angular CLI and Angular Material 10. 
2. Date range picker added
3. Warnings about CommonJS imports:
4. Optional Stricter Settings
5. TypeScript 3.9
6. TSLib has been updated to v2.0
7. TSLint has been updated to v6
8. New Default Browser Configuration


## Angular 11
1. Popular bug fixes
2. **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.
3. Improved build and serve Reporting & Logging
4. Updated language service preview based on Ivy
5. Updated Hot Module Replacement(HMR) Support:
Angular CLI has now added to support of serving application with HMR. 
Use  `ng serve --hmr`
6. Faster Builds
7. Experimental webpack 5 support
8. TSLint and Codelyzer are deprecated
9. Removed Support of IE9/IE10 and IE Mobile.


## Angular 12
1. Added Tailwind CSS support.
2. Passing context to HTTP Interceptors : No more dirty hacks for passing metadata to HTTP interceptors.
3. Now Supports inline Sass in styles property of @Component decorator
4. Added support of Tailwind CSS: Now you just need to install tailswindcss package and add `tailwind.config.js` to use tailwind CSS
5. Nullish Coalescing: power of nullish coalescing is now also available on Angular templates in v12!
6. Strict mode is enabled by default
7. The Ivy-based Language Service is moving from opt-in to on by default.
8. The Ivy-based Language Service is moving from opt-in to on by default.
9. Deprecated support for IE 11.

## Angular 13
1. Creating dynamic components is easy now :
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.
2. IE 11 support is removed
3. Angular now supports the use of persistent build cache by default for new v13 projects, which results in 68% improvement in build speed.
4. RxJS 7.4 is now the default for the new apps. 
5. Supports TypeScript 4.4
6. Accessibility improvements for angular material components
7. Dynamically enable/disable validators
8. Restore history after canceled navigation