Chronology and Evolution of Angular through the Years - From v2 to v19

I’ve always been curious to check the evolution process of Angular over the years, from its early versions (Angular 2, not AngularJs) to the present ones.

\ Hence, the motivation for this project, developed in my free time in recent months. Besides this post, I developed a small application, the code of which you can check on my GitHub.

\ Moreover, it will serve as a way for me to always keep up and study the evolution of this technology that has been my main work in recent years.

\ There are many versions, and in this post, I will talk about the advances present in each one and the most relevant changes in the application as I evolve the Angular versions, as well as the errors and solutions I applied. In each session, I will mention the release date of that Angular and the version of node in which I ran our sample application.

\ In every new version, we will have something that optimizes the bundle, making these smaller and thus applications loading faster. This is usually one of the main objectives of the Angular development team. Something that always occurs is also the adoption of a more recent and stable version of Typescript.

\ The Project

\ Each version of Angular has its own branch. The latest version in the repository (at the time of writing it is version 19) is also the master.

\ I created the project in a WSL Ubuntu running on Windows 11. You can do this on Windows too, but in Linux I have been more productive, mainly because to switch between node versions I have been using "n" (I think it's better than nvm).

\

\ Initially, I started with Angular 15 and went back through the versions, but then I saw that it would be more interesting to start from the older versions to the newer ones to better understand the evolution process.

\ I took the compatibility table from the official documentation as a reference to know which node is suitable for the Angular version I’m working with. In practice, I noticed that there were some cases where the documentation guidelines didn’t work.

\ In addition, the upgrade guide from one version to another is quite useful. Then it might be necessary to install new versions of some libraries manually and sometimes delete the node_modules folder before the process.

\ As the Angular versions evolved, we also advanced the libraries like ngx-bootstrap, rxjs, etc.

\ The Application

\ My goal was to develop a simple CRUD, a game registration. CRUDs are always present in a programmer's life. From there we can monitor what changes in the code as we evolve in the Angular versions.

\

\ To keep it simple, the backend is a db.json file running on a json-server.

\ The listing screen is loaded via lazy loading just to emphasize the importance of its use, but in practice, it would only make sense if there were several modules. In addition, I set a 0.7-second delay so that the loading gif could be observed.

\ I thought about calculating the size of the builds for each version, but I gave up considering that in a very small application it wouldn't make much difference.

\ Starting with Angular 7, we are using ngx-bootstrap. To see its compatibility table with Angular, I consulted the documentation, in the Compatibility section.

\ Common Situations and Errors When Using Older Nodejs and Angular Versions

\ When running the application, the "error:0308010C:digital envelope routines :: unsupported" or "error:03000086 code: 'ERROSSLEVP_UNSUPPORTED" may occur. This can be resolved by downgrading to a previous version of node or changing some of its and openssl's settings. Since in our case the idea is to run the application in an older version, updating the dependencies is not an option.

\ The error "This likely means that the library ___ which declares __. has not been processed correctly by ngcc, or is not compatible with Angular Ivy" may keep appearing in VS Code, but the application works. I observed this from Angular 4 to 7.

\ It is usually better to use the latest node to run ng update (or npm install) as postinstall errors and others might occur, and then go back to the node corresponding to the Angular version in question to run the application.

\ When following the process of advancing version by version via ng update, it is quite common for it to only work after a --force.

\ Angular 2, September 14, 2016

\ The first version of Angular as we really know it started at 2, which was created from scratch, taking only the old AngularJs, from 2010, as a basis. Google completely overhauled the architecture, preventing us from considering them the same language.

\ There was no Angular 3, by decision of the development team, to avoid confusion with Angular Router, which was already at version 3 at the time.

\ As you can see in the repository, we will only have versions of the sample application from Angular 4 onwards. I did not implement in Angular 2 simply because it was very difficult to set up an environment where the application would run, even using the oldest available node versions.

\ Angular 4, March 23, 2017 (node 8)

\ Angular 4 was the major update after Angular 2. From here, a new version was released regularly every 6 months.

\ One of the main advances at the time was AOT (Ahead of Time) and the View Engine, aiming to make the bundle smaller and faster to load; the animations package was extracted from angular/core to its own package; source map generation was possible.

\ About our application, it installed without errors with node 8 and not with 6, contrary to what the documentation stated.

\ Errors that occurred: 1) "Cannot read property 'config' of null": resolved by including the .angular-cli.json file, following the structure suggested in this link; 2) "Unknown browser query 'dead'": resolved by deleting the browserslist file in the src folder or editing it according to the link.

\ Unlike rxjs versions above 6, there is no EMPTY operator. So, we use empty(). When using a service you still need to reference it in providers.

\ Apparently, there was still no support for lazy loading, as it did not recognize the notation.

\ At first, ngx-bootstrap could not be used, so I opted for a javascript confirmation prompt as a substitute for its modal.

\ Angular 5, November 1, 2017 (node 8)

\ The news in this version included: optimization and reduction in bundle size; AOT compilation enabled by default; service workers for PWA development.

\ The upgrade process to Angular 5 worked according to the documentation guidelines. One strange thing that happened was an error importing the environment, necessary to define the base API URL. I had to invoke it with the relative path (".. /') for webpack to understand and compile the application correctly. This was the only version where we had this problem.

\ Angular 6, May 4, 2018 (node 8)

\ One of the most important news in Angular 6 was the synchronization of major versions of framework packages (angular/core, angular/common, angular/compiler, etc.), Angular CLI, and Angular Material+CDK to a single version 6.0.0. The first version of the important ng update was launched here. Many new features in Angular Material. RxJS 6. LTS expansion to all major releases.

\ From here, each major release would be supported for 18 months, with 6 months of active development followed by 12 months of critical bug fixes and security patches. First mention of Ivy for the future.

\ In this version, it was possible to run our application with app-routing/games-routing and lazy-loading.

\ Angular 7, October 18, 2018 (node 8)

\ This new version of Angular shows good evolution in using ng update for version evolution. Here, performance budgeting is introduced, which allows increasing or reducing memory usage limits through settings in angular.json.

\ I followed the migration guidelines from 6 to 7, and it was much smoother than I imagined.

\ About our app, it was already possible to start using ngx-bootstrap in its version 5.6.0, and with that the BsModal works from now on.

\ Angular 8, May 28, 2019 (node 12)

\ Contrary to what the official documentation points out, node 12 was needed to run npm install on the application, and not ^10.9.0. Trying to migrate from angular 7, the command recommended by the documentation also didn't work, even running on node 10.9.

\ Perhaps the most important news in this version was Differential Loading by default. It builds 2 bundles, generating a version of the application for modern browsers (ES2015) and another for old ones (ES5).

\ There were changes in the notation of the important Lazy Loading feature and the preview version of Ivy was released.

\ In our app, I removed codelyzer and tslint, since we won’t use them anyway, and they would be deprecated in Angular 11 for eslint. Angular/http was removed in this version (it had been deprecated since Angular 5), now located inside angular/commons.

\ Angular 9, February 6, 2020 (node 12)

\ Angular 9 was the most important update in 3 years. The Ivy compiler was finally established, being much superior to the View Engine, with the mission of reducing bundle size, increasing build speed, and improving debugging; Enabled AOT builds not only in production but also in other environments; A more informative ng update, with very detailed reports of what is being done during the process, being able to even refactor the code if necessary; No more need for entryComponents to inform a component to the compiler, as Angular finds it on its own.

\ Ivy has a huge focus on tree-shaking processes**.** It involves the TypeScript compiler analyzing your code to identify which libraries are needed, eliminating any unused code. In Angular 9, Ivy is the default rendering engine.

\ In this post, an interesting analysis is made of the improvements obtained in a migration from Angular 7 to 9.

\

\ In our app, when running ng update, there was an error in the animations library (also resolved with --force), and it ran successfully on the first attempt, although some errors occurred after the application started.

\ The error "_ does not appear to be an NgModule class" (CommonModule, among others) did not compromise the application. It seems to be a false negative that is sometimes reported by VS Code.

\ The error "Error TS1323: Dynamic import is only supported when the --module flag is commonjs or esNext" is resolved by setting "module": "esnext" in tsconfig.json.

\ In tsconfig.json, Ivy is enabled and the target is upgraded to es2015.

\ Angular 10, June 24, 2020 (node 12)

\ From this version, warnings are sent when your build contains CommonJS, which can lead to heavier and slower applications. The message is "CommonJS or AMD dependencies can cause optimization bailouts." Very common to appear, I've encountered it several times in applications I've worked on.

\ Option to create an application in strict TypeScript mode, which helps with code maintenance, early bug detection, and allows the CLI to perform advanced optimizations on your application. The default bundle budgets can be reduced by up to 75%.

\ New projects disable ES5 builds by default. No more ESM5 or FESM5 bundles, saving 119MB of download and installation when running npm install for Angular packages and libraries. Support for IE 9 and 10 is finally discontinued.

\ In our app, there were some libraries I had to manually analyze. I upgraded ngx-bootstrap to v6, suitable for Angular 10. Warning for unused environment files, which made me delete the prod.

\ We see ng update running even more smoothly, with fewer problems. The module in tsconfig was set to es2020. And it ran smoothly on the first try.

\ Angular 11, November 11, 2020 (node 14)

\ Major highlights in this version: Build report improvements, with more detailed information; codelyzer and tslint were discontinued, and

migration to eslint is recommended; Support for IE9/IE10/IE mobile removed, only maintaining support for IE11.

\

\ Angular 12, May 12, 2021 (node 14)

\ In this version, View Engine was definitively deprecated, aiming to converge the entire Angular ecosystem to Ivy. Protractor will no longer be included in new projects, and should be replaced by other options like Cypress, WebdriverIO, etc. The nullish coalescing operator (??) can now be used in Angular templates. Support for Tailwind CSS. Strict mode is now enabled by default in the CLI, which helps catch errors earlier in the development cycle. Support for webpack 5.

\ When migrating from version 11 to 12, the error “An unhandled exception occurred: The ‘buildOptimizer’ option cannot be used without ‘aot’” occurred. This was resolved by changing “aot” to “true” in angular.json.

\ Additionally, after the migration, several warnings related to CSS started to appear. I tried solving this by modifying angular.json, without success. Since it didn't affect the application, I decided to let it go. The warning persisted until version 14. According to this post, the issue was resolved in Angular 15, apparently with the update to TypeScript 4.9.4.

\ Other issues were resolved after I started using styles.scss instead of styles.css.

\ Angular 13, November 4, 2021 (node 14)

\ This was a very important version, one of the ones I worked on the most due to a complex migration project at my company, which I documented in this post.

\ Bootstrap enters version 5 from this point. Support for IE11 has been removed. Bundle optimization is provided by removing IE-specific polyfills and code paths.

\ The need for differential loading that existed until Angular 12 has also been removed. Now, only main.js is created during the build, with no separate main-es5.js or main-es2015.js files, making the process faster.

\ There was a conflict error between Jasmine and angular-devkit/build-angular, which I resolved by changing jasmine-core from 3.4 to 3.8, as mentioned in the link.

\ Angular 14, June 2, 2022 (node 14)

\ In this version, standalone components arrived in the framework with developer preview status: they are self-contained components that can be imported more directly, without declaring a module.

\ The application migration process via ng update was the most successful so far. No issues occurred. The TypeScript compilation target was updated to the new standard: ES2020. The form classes have all been migrated to their new untyped versions (e.g., FormGroup -> UntypedFormGroup).

\ Angular 15, November 18, 2022 (node 16)

\ In Angular 15, standalone APIs evolved from developer preview to stable, working correctly throughout the framework, and can be created directly via the Angular CLI. There is a new standalone API for Router and HttpClient, which can reduce code size by up to 11% in the case of Router. Image Directive available for image optimization. Route guard code is now more reduced and optimized. Improved presentation and understanding of the stacktrace. Refactoring of Angular Material. CDK Listbox. Improvements in esbuild.

\ Regarding the application, as I mentioned at the beginning of the post, I started the project in this version. Since there were no updates from a previous version, the project might be a bit "cleaner" from here on.

\ Angular 16, May 3, 2023 (node 16)

\ Angular 16 was considered the biggest release since the creation of Angular. Reactivity was completely rethought, with the introduction of Angular Signals, making the desire to make zone.js optional a reality. SSR (Server Side Rendering) and Hydration features are introduced, bringing performance improvements.

\ Hydration enables Angular to avoid re-rendering the application from scratch, resulting in about a 45% improvement in tests that were conducted. Support for unit testing with Jest and plans to gradually replace Karma with Web Test Runner. Support for TypeScript 5.

\ The Angular Signals library allows you to define reactive values and express dependencies between them. The rxjs-interop library allows for easy interoperability between Signals and RxJS.

\ A guide and a new schematics tool have been created to practically transition applications from older versions to standalone APIs.

\ Angular 17, November 8, 2023 (node 20)

\ In this version, we have Deferrable views (in developer preview), making the lazy loading feature even more powerful, allowing loading on demand pieces of a page.

\ A new official documentation on angular.dev. Dependency injection debug in devtools. ng generate creates standalone API components by default.

\ One of the most important new features is the improved integrated control flow (still in developer preview). The use of *ngIf and *ngSwitch, for example, was a bit confusing. Now we have @if/@else and @switch/@case. In the case of @for, its implementation is so much better optimized that it can be up to 90% faster in some situations compared to the old *ngFor. For a more detailed understanding, I recommend this article for if and this one for for.

\ Hydration is now stable and enabled by default in all new applications using SSR. There are new lifecycle steps to handle these introduced features.

\ The default build now uses Vite and esbuild. Improvements of up to 67% in build time and up to 87% with SSR/SSG have been reported. During development, the edit-refresh with ng serve can be up to 80% faster. All compared to the old model that used webpack.

\ Angular 18, May 22, 2024 (node 20)

\ The highlight of Angular 18 is perhaps the enhancement of various features released in the last 3 releases.

\ The release of the long-awaited zoneless change detection, in experimental support, marks the end of using zone.js, whose performance has always been questioned. By removing it from the application, the benefits include: better interoperability with other structures and micro-frontends; faster initial rendering and runtime; smaller bundle size and faster page loads; more readable stacktraces; and simpler debugging.

\ The use of signals has evolved to the point that even YouTube has adopted it. Improved debugging experience, making it possible to check the hydration status through devtools.

\ Material 3, deferrable views, and built-in control flow are now stable and have incorporated improvements. Server-side rendering enhancements. There are reports of companies that reduced the bundle size of one of their apps by 50% just by using the new @defer.

\ When running ng update, there is now an option to select “Migrate application projects to the new build system.”

\ Angular 19, November 19, 2024 (node 20)

\ In this latest version of Angular, we have more news. In Developer preview: incremental hydration, with support for the most demanding performance use cases; with the ServerRoute interface, it is possible to control which routes render on the client, server, or during compilation and resolve route parameters during pre-rendering; new Schematics to keep you up to date with the latest best practices: inputs, outputs, queries, inject-based dependency injection, and the new build system.

\ Editing and updating code have been improved with HMR (Hot Module Replacement). Enabled by default.

\ Karma is being deprecated and in 2025 a standard test runner recommendation will be chosen. The Material 3 Theming API has evolved. New time-picker component. Report of unused imports.

\ Standalone components, which were introduced in Angular 14, are now enabled by default. Directives, components, and pipes are updated during ng update, which has a new migration option: provide-initializer.

\ Our app continues migrating smoothly through its various ng updates.

\ Trying to keep up with what has arrived and what's coming

\ I would like to test several of these new features that I haven't had the opportunity to include in the sample application: Signals (zoneless app), Hydration, Standalone APIs, Deferrable views.

\ Let's try in the future.