Angular flavors — A quick compilation

It has been sometime now, that the UI community is seeing an ever expanding growth related to Open source frameworks right from the days of Javascript till the current trending Angular \ React \ Vue to name a few. In this article, we can see the journey of Angular versions, by listing the features included across each of them. Let the travel begin :)

Angular Js or 1

There isn’t any initial version, as the objective was to rewrite the widely used AngularJS 1.X version, into a well-formed\knitted, structured layout, object oriented programming language and still staying loosely coupled.

Angular 2, Complete rewrite

1. Completely rewritten using TypeScript, the Superscript of JavaScript. ES5, ES6, TypeScript, Dart are the scripting choices that can be used to code.
2. Mobile oriented
3. New Bindings [( )]. camelCase syntaxing, for built-in directives.
4. OOPs, Static Typing, Generics. Controllers replaced by Components.

Angular 3

“Skipped for Uniformity”, across its modules like Core, Compiler, CLI, HTTP, router etc. From here on, only SINGLE version release for all modules across Angular stack.

Angular 4, Big Leap with CLI

1. Faster Compilation, generated code size reduced by 60%.
2. {BrowserAnimationModule}- relocated from @angular\core to @angular\platform-browser\animations.
3. *ngIf/Else — introduced; Validation Pipe — Email.
4. Renderer → Renderer2, in @angular\core
5. Typescript 2.1\2.2 supported.

Angular 5

1. Build Optimizer, PROD builds by default.
2. Angular Universal State Transfer API, DOM support.
3. Compiler Improvements.
4. i18n — Number, Date, Currency pipes.
5. HttpClient: HttpModule, @angular\http deprecated. Instead, introduced HttpClientModule in @angular\common\http, and remove any map(res => res.json()) calls, which are no longer needed..
6. Angular CLI v1.5 will generate v5 projects, by default.
7. Angular Forms, adds ‘UpdateOn’ Blur\Submit.
8. RxJS 5.5 support.

New Router Lifecycle events — GuardsCheckStart\End, ChildActivationStart\End, ActivationStart\End, ResolveStart\End.

Angular 6

1. Includes Angular CLI 6, 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.
2. CLI commands added — ng update, ng add.
3. CLI Workspaces
4. Angular Elements
5. Component Dev Kit (CDK), Schematics.
6. Angular Material Starter Components
7. Tree Shakable providers
8. Animations’ performance improvements
9. RxJS 6.0 Support

Angular 7

1. synced Angular CLI 7, Material 7
2. 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.
3. Bundle Budgets in CLI.
4. Angular Material 7 CDK → Virtual Scrolling, Drag & Drop
5. Angular Elements’ Content projection support
6. Dependencies support — Typescript 3.1, RxJS 6.3, Node 10

Angular 8

1. synced Angular CLI 8, Material 8
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. CLI → Builder APIs → 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 CLI.
6. Web Worker support
7. CLI 8.3.0 — ng deploy, added new initial app UX created using ‘ng new’

Angular 9

1. synced CLI \ Material 9
2. Ivy Compiler. This was set as ‘opt-in’ mode in Angular 8.
3. In, @injectable → { ProviderIn: ‘platform’, any }
4. 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.

5. Component Harness

6. Typescript 3.7

7. Angular Material new components → Youtube player, google maps.

Angular 10

1. synced CLI \ Material 10
2. Angular Material new components → Date Range Picker
3. Warnings about CommonJS imports
4. Optional Stricter Settings
5. Typescript 3.9, TsLib 2.0, TsLint V6
6. New Default Browser configuration

Angular 11

1. Enhanced Reporting and Logging
2. Automatic Inlining of Fonts
3. Component Test Harness
4. Updates on Operation Byelog
5. Faster Builds, Typescript 4.0
6. Updated Hot Module Replacement Support (HMRS)
   ng serve — configuration hmr
7. Webpack 5 support
8. Updated Language Service Preview

Angular 12 — Ivy Everywhere

1. Deprecated View Engine, shall be removed in future major release.
2. Transitioning from Legacy i18n Message IDs to Canonical format, which will be better streamlined.
3. Future of Protractor — working on Cypress, WebdriverIO, TestCafe as alternates.
4. Nullish Coalescing, ?? operator — similar to C# or other languages, in simplification of conditional checks.
5. Learning Angular — Content Contribution Gide, Content Projection and few other learning content, contributing more to the dev community.
6. Stylish Improvements —

• Angular CDK and Angular Material has internally adopted to the new SASS module system, update the npm package accordingly (node-sass to sass). This also expose new Sass API surface, with @use syntax. The ng update takes care of these new API @import to @use change.
• Inline SASS support in the styles field of @component decorator (with “inlineStyleLanguage”: “scss” to angular.json).
• Support to Tailwind CSS — Import the npm package, and add tailwind.config.js in project.
• platform: Specifying providedIn: ‘platform’ makes the service available in a special singleton platform injector that is shared by all applications on the page.

7. Deprecating support for IE11

8. Other features

• ng build now defaults to Production, prevents any accidental deployment.
• Strict mode, by default in CLI.
• Ivy-based Language Service — Opt-in to On, by default. This boosts productivity, inside Angular templates.
• Webpack 5 — production ready support, which was introduced in v11 as experimental.
• Typescript 4.2 support
• Avoid ngZone, from throwing navigation related warnings.
• HttpClient supports specifying request metadata.
• min &max, Form validators added.
• APP_INITIALIZER work with observables.
• Support to Tailwind CSS — Import the npm package, and add tailwind.config.js in project.