Angular 11, the newest update to the Google-developed web framework, has just been launched as a product release. Highlights include more stringent types, router performance enhancements, and automatic inlining of fonts.
Angular 11 Version New Highlights
1. Automatic Font Inlining
The team introduces automatic inlining of fonts to improve your app’s performance by rushing up the first contently paint. While compile-time, the Angular CLI will download and inline fonts remaining used and consolidated in the application. The automatic font inlining will be permitted by default in apps with Angular 11. Applications will require to be updated to get the advantage of this.
2. Improved Reporting and Logging
Version 11 of Angular has raised the reporting and logging.
Modifications have been made to the maker phase reporting, which presents it even more useful during development. New CLI updates have also been included in this Angular version, which will make the logs and reports more comfortable to read. This will come as a massive boost to developers as a better way to read records and information can save a considerable amount of time and increase efficiency.
3. Component Test Harness
This component was added in Angular version 9. It renders a clear and robust API surface to assist with Angular Material components measurement. It gives developers a way to communicate with Angular Material components with the aid of API during testing.
Version 11 has harnesses for all components, and the developers can build more strong test suits. The company has also added performance enhancements & new APIs.
The simultaneous function makes operating with non-synchronous developments in your tests more comfortable by allowing developers to run various non-synchronous communications with components simultaneously.
The manual change detection function allows developers to reach finer-grained change detection power by immobilizing automatic change detection in unit tests.
4. Better Language Service
The Angular Language Service provides useful mechanisms to make progress with Angular fun and fruitful. The latest version of the language service is based on View Engine. Angular version 11 will have a look into the Ivy-based language services.
The updated language service provides a more accurate and robust experience for developers. The language service will now accurately infer general types in templates, just like the TypeScript compiler does.
5. Upgraded Hot Module Replacement (HMR) Support
Angular had given support for HMR but promoting it needed development and code changes, making it light ideal for swiftly, including Angular projects. In version 11, the company has updated the CLI to allow HMR to start an app with ng serve.
To start, run this command: ng serve –HMR
Once the local server starts, the console will showcase a note verifying that HMR is active.
The latest additions to templates, styles, and components will be immediately updated into the running app during the development—all without requiring a full-page refresh. Data typed into forms are maintained and scroll position giving a boost to developer potency.
6. Experimental webpack 5 Support
Currently, the company can opt-in to webpack version 5. Now, you could try with module federation. Soon, webpack v5 will clear the road for:
- Smaller packages thanks to cjs tree-shaking.
- Faster build with regular disk caching.
The organization doesn’t suggest opting in for product uses since support is experimental & under construction.
TSLint is disliked by the project authors who recommend migration to ESLint. James Henry, jointly with others from the open-source community, built a 3rd party solution and migration route through angular-eslint, typescript-eslint, and tslint-to-eslint config.
The team is mourning the use of Codelyzer and TSLint in version 11. It means that in future variants, the default execution for linting angular projects won’t be available.
In this update, we’re dropping support for IE9/IE10 and IE mobile. IE11 is the variant of IE still backed-up by the company in Angular 11. The company has also reduced deplored APIs and added a few to the depreciation list. Make sure to verify to ensure you are utilizing the latest APIs and complying with our suggested best practices.
In this blog, we have discussed the latest Angular 11 version highlights in-depth. The features discussed above are the best that brings the developer’s attention and offer them direction and information on the upgrades.
IT Solution Providers can leverage this latest framework to benefit and develop the best apps to improve the user experience.