AngularJS to Angular 14

Per definition, Angular is a component-based framework for building scalable web applications. Angular is a great framework because it combines declarative templates, dependency injection, end-to-end tooling, and integrated best practices to solve development challenges. But, it did not start at where it is today, a well-established framework. So, how did Angular start, and how did it evolve to where it is today?

AngularJS

The first version of Angular was named AngularJS and was started as an internal development framework developed by Miško Hevery, to help developers at google build better and faster applications. It was named Angular because you could write Javascript code inside HMTL tags which start and end with angular brackets ( < > ).

  • AngularJS is also known as Angular.js or Angular 1.x
  • It is a Javascript-based framework
  • Mainly maintained by Google
  • Last major release it Angular 1.7.x
  • As of 1st January 2022, it has reached the EOL (end of life) support

Angular 2.0

Angular was really famous for several years after its initial release, until the landscape of web development started to change and AngularJS hit a wall. New advancements and standards in JavaScript emerged, and Angular started to get left behind the bleeding edge.
So, the team at Google decided to develop a framework from the ground up, named just Angular.

  • Released in September 2016
  • Angular 2 is a complete rewrite of AngularJS
  • It is a typescript-based framework
  • Angular 2 is mobile-oriented (Angular 1.x was not built with mobile support in mind)
  • You could use ES5, ES5, Typescript, or Dart to write Angular 2 applications

Angular 3

Angular 3 was skipped because of version mismatches in libraries like @angular/core, @angular/compiler, and @angular/router.

Angular 4

All the other Angular versions from Angular 2.0 are not complete rewrites of Angular 2.0, but rather improvements on what was already existing in 2.0 or new features which do not introduce breakthrough architectural updates to Angular 2.0.

  • Released in March 2017
  • Backward compatible with 2.x.x for most applications
  • No major change compared to Angular 2
  • Reduced the size of the generated code for the components by around 60%
  • Faster compilation time

Angular 5

  • Released in November 2017
  • The default build optimized with Angular CLI
  • Faster compilation time
  • Internationalized number, date, and currency pipes
  • @angular/http deprecated, replaced with @angular/common/http
  • HttpModule deprecated, replaced with HttpClientModule
  • Supports RxJS 5.5
  • New Router Lifecycle Events : GuardsCheckStart, ChildActivationStart, ActivationStart, GuardsCheckEnd, ResolveStart, ResolveEnd, ActivationEnd, ChildActivationEnd

Angular 6

  • Released in May 2018, with Angular CLI 6 and Material 6
  • Angular elements
  • Component dev kit (CDK)
  • Schematics
  • Animations performance improvement
  • Two new angular CLI commands added : ng update and ng add

Angular 7

  • Released in Oct 2018, synchronized released with Angular CLI 7 and Angular Material 7
  • Performance improvements
  • Features improvements like CLI Prompts, Virtual scrolling, Drag and drops
  • Angular Material & CDKVirtual Scrolling
  • Drag and Drop
  • Content Projection support in Angular Elements
  • Dependency updates :TypeScript 3.1
  • RxJS 6.3
  • Added support for Node 10

Angular 8

  • Released in May 2018
  • Dynamic imports for route configurations
  • Builder APIs in the CLI
  • Workspace APIs in the CLI
  • Web worker support
  • Angular CLI 8.3.0 supports “ng deploy” command

Angular 9

  • Released in February 2020
  • Ivy compiler – next generation angular compilation and rendering pipeline
    • 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.
    • platform – It makes the service available in a special singleton platform injector that is shared by all applications on the page.
    • any – It provides a unique instance in every module (including lazy modules) that injects the token.
  • New Angular Material components
    • Youtube player Component 
    • Google Maps Component
  • TypeScript 3.7 Support 

Angular 10

This is a smaller release compared to other releases

  • Released in June 2020
  • Warning about CommonJS imports
  • Optional stricter options
  • Support for TypeScript 3.9
  • TSLib has been updated to v2.0
  • TSLint has been updated to v6
  • New Default Browser Configuration

Angular 11

This was released shortly after the Angular 10 version and was mainly released for some bug fixes, but some good features were also added to this version.

  • Released in November 2020
  • Fixed 3 important bugs
    • RouterLink – Incorrect relative link if defined in a component having empty path [#13011]
    • FormGroup & FormControl statusChanges is not emitted on creation [#14542]
    • i18n – Able to use translation strings outside a template[#11405]
  • Improved build and serve
  • Updated language based on Ivy
  • Angular CLI support for Hot Module Replacement (HMR) – ng serve –hmr
  • Faster builds

Angular 12

  • Released in May 2021
  • Passing context to HTTP interceptors
  • Support for inline SASS in styles property @Component decorator
  • Support for Tailwind CSS
  • Null coalescing support
  • Strict mode enabled by default
  • Ivy-based language service is enabled by default
  • Support for Webpack 5

Angular 13

  • Released in November 2021
  • Dynamic component support
  • Removed IE 11 support
  • Improvement in build speed by 68%
  • 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

Angular 14

  • Released in June 2022
  • Standalone Components
  • More Powerful Dependency Injection
  • Page Title Resolver
  • Route Providers
  • Environment Initializer
  • Typed Reactive Forms
  • Passing an Injector to Embedded Views
  • Angular CLI Autocomplete

Enjoyed this post? Subscribe to my YouTube channel for more great content. Your support is much appreciated. Thank you!


Check out my Udemy profile for more great content and exclusive learning resources! Thank you for your support.
Ervis Trupja - Udemy



Enjoyed this blog post? Share it with your friends and help spread the word! Don't keep all this knowledge to yourself.