New Angular 11 is out!
November 23, 2020 at 11:43 am,
No comments
What are the new features of Angular 11?
The Angular Team has announced their release of Angular 11 with great new updates that include the framework and the
CLI. Let’s get into it!
Updates on Operation Byelog
The Angular team has finally triaged the issues in all three monorepos and are committed to
triage all new issues within 2 weeks after being reported. The issues in the router and forms are fixed as well.
Another great news is that Angular has promised to listen closely to their community and improve the process to
accept community contributions.
Automatic Inlining of Fonts
Another great feature of Angular 11.0.0 is automatic font lining. Angular CLI will download and
inline fonts during compile that are used and linked in the application by default. To use this optimization, all
you need to do is update your Angular app!
Component Test Harnesses
It’s an improved version of the original one that was introduced in Angular 9. In version 11,
there is now a harness for all of the components, which gives developers the ability to create more robust suites.
They have also included new APIs and performance improvements. Now developers can run multiple asynchronous
interactions with components in parallel that makes working with asynchronous actions in tests easier with the new
parallel function. And with the manualChangeDetection function, which disables automatic change detection in unit
tests, developers can have access to fine-grained control of change detection.
Updated Language Service Preview
The new version of Language Service Preview is an Ivy-based language service that gives a more
powerful and accurate experience for developers. Similar to the TypeScript compiler, the new language service
can correctly infer generic types in templates. For instance, as you can see in the image below the new version
can infer that the iterable is of type string. Although this update is still in development, we can’t help but be
excited for its release on the upcoming dates.
Angular Language Service inferring iterable types in templates
Updated Hot Module Replacement (HMR) Support
Angular now has updated CLI that allows enabling HMR when starting an application with ng
serve. You can run the following command: Let's start by creating our template Angular app to use in Electron.
1 | ng serve --hmr |
A message will be displayed confirming that HMR is active after the local server starts the console
Attention! The HMR is enabled for the dev server.
To learn more, click on this link for information
on working with HMR for webpack.
Without refreshing a page, all the latest changes to the components during the development, styles, and
templates will instantly update into the running application. To not slow developer’s productivity, this
new feature will preserve data typed into forms and the scroll position.
Experimental webpack 5 Support
The new version also presents Experimental webpack 5 Support where teams now can
opt-in to webpack v5. Now that you can experiment with module federation, soon enough with webpack v5
you can do:
- Faster builds with persistent disk caching
- Smaller bundles thanks to cjs tree-shaking
It is in the experimental phase and the Angular team suggests not to opt-in for
production uses. To try the new webpack 5 add the following section to your package.json file:
1 2 3 | resolutions: { webpack: "5.4.0"} |
NOTICE: For now you’ll have to use yarn to test this as npm does not yet support
the resolutions property.
Other new cool features
The new Angular 11 version introduces a ton of new cool features like Improved Reporting
and Logging, Faster Builds, Linting, Housekeeping, Roadmap. To learn more about these features, make sure to
read the full article from Angular Teams on Angular 11.
Update to new version now!
If you would like to update to the newest version, run this command to update Angular and the CLI:
1 | ng update @angular/cli @angular/core |
Go to update.angular.io to get detailed information and
guidance on updating. The Angular team always
recommends upgrading one major release at a time to have the best update experience.
Hope you enjoyed our #MondayBlog on this Angular update and will have fun using the latest features! Stay
tuned for the upcoming Angular news.
