Angular is a JavaScript (TypeScript) based framework developed by Google for building web applications. Angular new version Angular 11 released on 11th days of 11th month isn’t it cool? The released date of Angular 11 was 11th November 2020. The new version specially designed for single page application and focusing on improving the developer experience by addressing the bugs and issues raised by the community.
In a new version, the angular development community solved the issue of bugs and other features which was occurred during angular 9 and 10. Finally, Angular 11 Resolved the issue of GitHub which is tracker has been organized to triangle the new bug issue within 2 weeks. This release has updates across the platform including the framework, the CLI components. Let’s check what’s new in Angular 11.
Update Hot Module Replacement (HMR) Support
Hot Module Replacement allows the modules to be replaced without full browser support, but the version of Angular 11 offers support for Hot Module Replacement with required configuration and code changes that make it less than ideal to quickly include in angular projects. Angular 11 allows the CLI to enable Hot Module Replacement while starting an application with ng server
Ng serve --hmr
The console will display a message after the local server starts confirming that Hot Module Replacement is active. During the latest change to components, templates and style will be instantly updated into the running application without refreshing the page.
The datatype in forms is preserved as well as scroll position proving a boost to developer productivity.
Update on operating Byelog
The angular roadmap is one of the items was operating Byelog where we putting significant engineering efforts towards tringing issues and PRs before having a clear understanding of the extensive community needs.
All the issues have now successfully triggered in each of the three monorepos that will proceed with this as an ongoing effort as new issues get reported. In the process, we resolved a few popular issues in the router and forms.
Now, all the issues will now be triaged within 2 weeks of the occurrence, which has reduced the size of the Angular backlog and resolved tons of issues.
Faster builds
Angular has been consistently doing with a new version is the commitment to optimizing for speed. It has brought in faster development and build cycle that makes update into some key areas:
- ngcc – the angular compile
- TypeScript V4.0
The ngcc update process will be upon 4x faster as a new change in angular 11. It means it will have to spend comparatively less time writing for builds and rebuild to complete.
Typescript4.1 will get you faster builds.
Moving to ENLint
Angular always implemented linting with TSLint by default but TSLint is now deprecated by the creators, who recommended migrating to ENLint completely, Angular 11 has deprecated the use of TSLint and codelyzer. The feature version will not have the default implementation for linting angular projects.
Angular 11, TSLint is deprecated by the developers who recommend migration to ENLint.
The open-source community developed a third-party solution and planned a migration through typescript-eslinst, angular eslinst and tslint-to-enlint-config and this has been tested to ensure a smooth transition for angular devs.
Automatic inlining of fonts
Angular 11 features automatic font inlining that converts your google fonts and icons to inline in index html. This will happen everything you set the blow flag in your angular.json under the build option.
Angular CLI will download and inline fonts during compile time that are being used and linked in the app. Angular 11 is enabled by default for production configuration. You will need to update your application to enable this by default apps built with version 11.
"configurations": {"optimization": {"fonts": {"inline": false }}}
Webpack 5 support
Angular 11 ship with an opt-in experimental webpack support. It is used to incorporate countless documents into a single bundle or single records.
Angular plans to lead this patch and allows for faster build with really persistent caching of the disk and even smaller bundle size with the cjs tree shaking.
This webpack V5 in the further will clear path for:
- Faster build and disk checking
- Smaller bundles with cjs tree shaking
Add the following code in our package JSON file:
"resolutions": {"webpack": "5.4.0"}
Note: Angular 11 need to use yarn to test because npm does not support the resolution property yet.
Some other updates are :
- The Angular 11 has dropped support for TypeScript 3.9 and only supports 4.0, only to speed up the builds.
- The roadmap has been updated as one of the new features of Angular 11 in progress project. This approach reflects the larger efforts allowing the developers to provide early feedback that is to be incorporated into the final release.
- Angular 11 does not support IE 9. 10. Angular however still supports IE11. Angular 11 also has removed obsolete API and several functions have been added to its deprecated list.
- In the earlier versions, the calling TestBed.override provider after TestBed instatement had no impact, users will now get an exception if they attempt to do this.
- Angular 11 also ships with new changes in the way reporting is done on the builder phase during development. New changes have now been made on the CLI to make logs and even reports generally easy to read.
Update to get version 11
When you are ready to update tho version 11, run the below command:
ng update @angular/cli @angular/core Conclusion
In a conclusion, in the above article, we discussed a quick overview of Angular 11. This new update comes with a major improvement. We are waiting for the next version of Angular that is supposed to bring us some of the fascinating features like Ivy-based language service and Angular 11 support of Nrwl NX.
For more articles –
