Angular is Google’s JavaScript framework for building web application, mobile or desktop apps. Google has released a new version of Angular which is Angular 11 and it has brought a lot of good features and also several improvements, aiming to simplify the development process. A new version focuses on improving the developer experience by addressing the bug issue raised by the community. If you are wondering what’s new in Angular 11, then let’s have a look at new features of Android 11.
It is one of the new features in Angular version 11. Angular CLI will now automatically download and inline the fonts that are linked in with the application. This feature will be enabled by default and is very helpful for commercial apps or websites as they benefit the most from having better web vitals. Google Fonts and Icon will be converted to inline in index.html with the flag mentioned below in angular.json under build option. These features are enabled by default for production configuration. You can take advantage of this optimization by ensuring that the internet connection is available during the build if build is running on CI. You have to update your application to enable this by default in apps built with version 11.
"configurations": { "optimization": { "fonts": false } } OR "configurations": { "optimization": { "fonts": { "inline": false } } }
This was introduced in Angular version 9. It gives a robust and legible API surface that assists with testing the Angular Material components. This provides a way for interaction of developers with Angular Material components by using supported API while testing. This is one of the Angular 11 advantages where the developers can more use robust test suites by providing harnessing to all components. Parallel function in Angular 11 works with asynchronous actions in tests by allowing developers to function various asynchronous interactions with components in parallel. Using manual change detection function, developers can disable automatic change detection in unit tests and access the finger-grained control of change detection.
Prior to this version, Angular implemented linting with TSLint by default, but TSLint is deprecated by creators, who recommend migrating to ES Lint completely. With the help of angular community, a third party migration path was built with typescript-eslint, angular-eslint and tslint-to-eslint-config and these has been tested to ensure a smooth transition for Angular devs. The use of TSLint and Codelyzer have been deprecated means the default implementation for linting will no longer be available but you can incorporate angular-eslint in a project and migrate from TSLint.
This new version of Angular came with an opt-in experimental webpack support. It means that, one can use version 5 of webpack in a project. Angular plans to lead this way and allow for faster builds with really persistent caching of disk and even small bundle sizes with the cjs tree-shaking. Keep in mind that it is in an experimental status, so don’t use it in a production yet. One can take it for a spin by enabling it inside your new project by adding the below line to package.json file:
"resolutions": { "webpack": "5.4.0" }
You have to use yarn though, as npm does not work yet.
Hot module replacement allows modules to be replaced without full browser refresh. It is an old concept for angular where developers have worked with HMR in earlier versions. One of the most exciting features of Angular 11 is that offers support for HMR with necessary configuration and code changes that make it less than ideal to quickly include in Angular.
New version allows CLI to enable HMR while starting an app with ng serve. Run the below command to start:
ng serve --hmr
The console will display a message after confirmation by the local server that HMR is active. In the development stage, latest changes to components, styles and templates will be instantly updated into the running application without need to refresh a full page. Data typed into forms are preserved providing a boost to developer productivity.
New version Angular 11 features the Angular Language Service which provides helpful tools to improve productivity and fun within the Angular environment. The current language service depends on View Engine which provides powerful and accurate experience for developers. New Angular version 11 changes this norm for language service to appropriately use generic types in templates like Typescript compiler. This feature provides powerful and accurate Ivy-based language service.
Angular 11 came with faster development and build cycle that makes updates in some important areas like-
In Angular 11, ngcc update process will be up to 4 times faster. Means users will have to spend less time waiting for builds and rebuilds to complete. When profiling Angular compiler, contributor had to make typescript compiler faster to improve the Ngcc. The change will appear in Typescript 4.1 so that when Angular supports Typescript 4.1 in next versions, it will get you faster builds.
In the past versions until now, named outlets consistently supported the component, and there was no way to lazy load the module with the use of named outlets. But in new version Angular 11, one can use it easily
const routes: Routes = [ { path: 'items', loadChildren: () => import('./items/items.module').then(m => m.ItemsModule) } ];
While using the RouteReuseStrategy #shouldReuseRoute method in the prior versions, there was an issue regarding future and next routes being traded for child routes. This issue is fixed in angular version 11 but you need to adjust your code if you are using it in your code already. And preserveQueryParams has been discontinued in angular 11, rather users will have to use queryParamsHandling=”preserve”.
In this new version, new parameter types allow variable to type NavigationExtras to be passed in, but they won’t allow object literals, as they may only specify known properties and types that don’t have common properties. So as to fix it, users can specify properties from NavigationExtras that use type assertion on object or variable: as NavigationExtras.
Angular 11 has made changes to improve the typing for validators and asyncValidators that prior were not available. Those arguments are properly typed for code to depend on directive constructor types because it may need some updates to improve type safety. In Angular 11, type of AbstractFormControl.parent includes null that is included in types of .parent. New version 11 migration adds non-null assertion operator wherever required. In prior versions, FormGroup, FormControl and FormArray class had async validators defined at initialization time. In the new version, the status event comes into the statusChanges observable.
Also know- Awesome Steps To Make Your Angular Form Reactive
These are some of the new features of Angular 11. Hot module replacement in Angular will be a major help during the build process and improvement in types of all pipes can help to avoid errors at runtime. The automatic inlining of fonts is a great feature to speed up the app-building process.
If you are thinking of choosing Angular for your next project, then you must know these new features. You can use these features and develop an effective web solution.