Angular 11 New Features
Version 11 of Angular has been released three days back(Nov 12), In Angular Version 11 having below listed features.
Updates on Operation Byelog:
Operation Byelog was a goal the Angular team set in place to triage all tickets in all three mono-repos. They have completed this goal and set a new standard for triaging any new issues that arise
As mentioned in the angular blog post, going forward, the Angular team commits to triage all new issues within two weeks.
Angular 11 major below GitHub issues have been resolved
https://github.com/angular/angular/issues/12842
https://github.com/angular/angular/issues/18469
https://github.com/angular/angular/issues/13011
https://github.com/angular/angular/issues/14542
https://github.com/angular/angular/issues/11405
Automatic Inlining of Fonts
Angular 11 introducing the automatic inlining of fonts. During compile time Angular CLI will download and inline fonts that are being used and linked in the application. This new feature will be enabled by default in angular 11.
Component Test Harnesses
In Angular v9 introduced Component Test Harnesses. now available for all components in v11.
Please visit the official doc for further details: https://material.angular.io/cdk/test-harnesses/overview
Improved Reporting and Logging
Angular 11 Bringing in new CLI output updates to make logs and reports easier to read.
Updated Language Service Preview
The Angular Language Service provides helpful tools to make development with Angular productive and fun. The updated language service provides a more powerful and accurate experience for developers.
Now, the language service will be able to correctly infer generic types in templates the same way the TypeScript compiler does. For example, in the screenshot below we’re able to infer that the iterable is of type string.
HMR (Hot Module Reload)
With Angular 11, HMR support has been added to the Angular CLI, making it much easier to enable HMR when starting an Angular application using ng serve --hmr.
After the local server starts the console will display a message confirming that HMR is active:
NOTICE: Hot Module Replacement (HMR) is enabled for the dev server.
Please visit the official doc for further details: https://webpack.js.org/guides/hot-module-replacement/
Faster Builds
Angular 11 brings speed improvements
- When installing dependencies, the ngcc(Angular compatibility compiler) update process is now 2–4x faster.
- Faster compilation with TypeScript v4.0.
Webpack 5 Support
Now we can use webpack 5 with Angular 11, but there are 2 things we need to keep in mind:
- This can be used if we are using yarn
- Webpack 5 support is still experimental, so not suggested for production
Want to try out webpack 5? just add to package.json
"resolutions": {
"webpack": "5.4.0"
}Linting
TSLint and Codelyzer are deprecated by the project creators who recommend migration to ESLint.
So, it is time for all of us to migrate to ESLint
There was a plan to migrate from TSLint to ESLint, but there is already angular-eslint builder which exist, and you can use the same
Please visit the below links for other ESLint modules:
https://github.com/typescript-eslint/typescript-eslint
https://github.com/typescript-eslint/tslint-to-eslint-config
Removing support for IE9/IE10 and IE mobile
In this update, Angular 11 has finally removed support for IE9/IE10 and IE mobile. IE11 is the only version of IE still supported by Angular.
Trusted types
DOM-based cross-site scripting (DOM XSS) is one of the most common web security vulnerabilities, and it’s very easy to introduce it in your application. Trusted Types give you the tools to write, security review, and maintain applications free of DOM XSS vulnerabilities by making the dangerous web API functions secure by default. Trusted Types are supported in Chrome 83, and a polyfill is available for other browsers. See Browser compatibility for up-to-date cross-browser support information.
Support Lazy Loading with Named Outlets
This Feature issue already mentioned above!.
{
path: '',
outlet: 'test',
loadChildren: () => import('./test/test.module').then(m => m.TestModule)}<router-outlet name=”test”></router-outlet>
ViewEncapsulation
ViewEncapsulation.Native has been removed. Use ViewEncapsulation.ShadowDom instead. Existing usages will be updated automatically by ng update
How to update to get version 11
When you are ready to go run this command to update Angular and CLI:
ng update @angular/cli @angular/coreCredits: