There are some technological advancements taking place every now and then due to our experts in the field. There are new upgrades and versions almost every day in the mobile and web development, frameworks, and programming languages. However, there is something different about the angular version 11 release because they launched it on the 11th data of the 11th month. They must have thought only if it were 2011, it would have been even better, haha!
Google has launched version 11 of angular, its well-known Single Page App framework. The launch focuses on enhancing the developer experience & finalizing the cleanup of the issue tracker. This version of the angular highlights interesting features such as components, framework, and CLI that we cannot cease from sharing the latest version. So, relax in your pajamas and sip your coffee while we discuss the
newest version of Google’s Angular 11.
What’s New With This Version?
1. Operation Blog
This is one of the most significant angular components that is upgraded according to the community needs that only an expert team can identify. This new upgrade includes 3 monorepos that triage all tickets. Angular team has committed to look forward to all new issues reported will be triaged in 2 weeks. They are planning to support the angular community. They’ll continue to triage and fix problems and work towards enhancing their processes for accepting community contributions.
2. Automatic Font Inlining
To increase your app’s speed by speeding up their first contentful paint, the team introduces automatic inlining of fonts. During compile-time, Angular CLI will install inline fonts that are being utilized and linked in the app. The angular team has enabled this in version 11 by default. To update your app, it is good to leverage this framework.
3. Component Test Harness
This component was introduced in Angular version 9. They render a legible and robust API surface to help with Angular Material components testing. It offers developers a way to interact with Angular Material components with the help of API during testing.
Version 11 has harnesses for all components, and the developers can create more powerful test suits. The team has also included performance improvements & new APIs. The simultaneous function makes working with non-synchronous actions in your tests easier by enabling developers to run various non-synchronous interactions with components simultaneously. The manualChangeDetection function provides developers to reach finer-grained control of change detection by immobilizing automatic change detection in unit tests.
4. Better Reporting & Logging
In this latest upgrade, the reporting and logging are easier than before with the CLI output in the new angular version 11. It is simpler to read the logs and a slight change that the team did to the builder phase recording.
5. Updated Language Service
The Angular Language Service renders useful tools to make development with Angular fun and productive. The existing version of the language service is based on View Engine. Angular version 11 will have a peek into the Ivy-based language services. The upgraded language service renders a more robust and precise experience for developers. The language service will now be able to correctly infer generic types in templates, just like the TypeScript compiler does.
6. Upgraded Hot Module Replacement (HMR) Support
Angular had offered support for HMR but facilitating it needed formation and code changes, making it less ideal for including in Angular projects swiftly. In version 11, the team has updated the CLI to permit enabling HMR while commencing an app with ng serve.
To begin, run this command: ng serve --hmr
Once the local server starts, the console will showcase a message verifying that HMR is active.
The latest changes to templates, styles, and components will be promptly updated into the running app during the development—all without needing a full page refresh. Data typed into forms are maintained and scroll position rendering a boost to developer productivity.
7. Experimental webpack 5 Support
Currently, the team can opt-in to webpack version 5. Now, you could experiment with module federation. Shortly, webpack v5 will clear the road for:
- Smaller bundles thanks to cjs tree-shaking
- Faster build with consistent disk caching
The team doesn’t recommend opting in for production uses since support is experimental & under development.
8. Linting
TSLint is deplored by the project creators who suggest migration to ESLint. James Henry, jointly with others from the open-source community, built a 3rd party solution and migration path through angular-eslint, typescript-eslint, and tslint-to-eslint config.
The team is deploring the use of Codelyzer and TSLint in version 11. This means that in upcoming versions, the default execution for linting angular projects won’t be available.
9. Housekeeping
In this update, we’re eliminating support for IE9/IE10 and IE mobile. IE11 is the version of IE still backed-up by angular. The team has also eliminated deplored APIs and included a few to the depreciation list. Make sure to confirm to ensure you are utilizing the latest APIs and complying with our suggested best practices.
10. Builds Faster
This new version of the angular helps develop the cycle quicker and swift development with slight changes in the critical areas.
- NGCC upgrades that make the installation process 2 to 4 times quicker.
- Quicker compilation.
Other Changes In The Angular 11
- Lazy Loading Support
- Stringent Types
- Service Improvements
- Produce Resolve guards
- Automates Migrations & Schematics
The Endnote
In this blog, we have discussed the new features of Angular 11 in depth. This is a solid release. The features mentioned above are the best that attract the developer’s attention and offer them guidance and information on the upgrades.