#1. Introduction, Features, Performance Improvements and Breaking Changes in Angular 10
Read time : 10-12 minutes
Angular 10 Introduction
Angular Version 10.0.0 is here! This is a major release that spans the entire platform, including the framework, Angular Material, and the Angular CLI - is available since June 24 2020. This release is smaller than typical, it has only been 4 months since we released version 9.0 of Angular.Angular 10 is smaller than previous versions of Angular. New capabilities include a new date range picker in the Angular Material UI, Component Library, warnings for CommonJS import etc.
Read the following for detail.
New features in Angular 10
1. Angular Material Date Range Picker :
2. Angular Language-service :
- Angular Language Service is an analysis engine that integrates into your code editor and provides it with a way to get completions, tracing of references, errors, hints, and navigation inside Angular templates.
- It works with external templates in separate HTML files and also with in-line templates. Your editor autodetects that you’re opening an Angular file. It then uses the Angular Language Service to read your tsconfig.json file, to find all the templates you have in your application, and then to provide language services for any templates you open.
- It’s available as an extension for Visual Studio Code, WebStorm, and Sublime Text. You can install it by using the following command:
npm install --save-dev @angular/language-service
- Addition of name spans. Name spans have been added to this new version for the purpose of property reads as well as method calls.Addition of dependency information to metadata.
- Dependency information and ng-content selectors have been added to metadata. The suggested compiler feature is set to provide supplementary metadata, favorable for tools like Angular Language Service. It possess the ability to give suggestions for directives/components defined in libraries.
- Propagation of the correct value span.The correct value span in an Expression Binding of a micro syntax expression has been propagated to Parsed Property which, in return, will propagate the spans to templates ASTs (both VE and Ivy).
4. NGCC
1. Compiler-cli: It gradually type checks the template and splits Ivy template type checking into multiple files.
2. NGCC:
- Permit async locking timeouts to be configured.This feature allows async locking timeouts to get configured. This adds support for the ngcc.config.js file for setting up the retry Attempts and retryDelay options for the AsyncLocker. The above mentioned ngcc.config.js is then used by an integration test, adding a new check for timeout in order to minimize the timeout time to prevent the test from consuming too much of time.
- Implementation of program-based entry-point finder. A program-based entry-point finder has been assigned as a new feature to this version. This has been designed to process the entry points that are accessible by the program defined by a tsconfig.json file only. Usage of this option can speed up the processing in the cases where there is a very large amount of dependencies installed. As a matter of fact, only a small proportion of entry points are actually imported into the application.
- Closure mode to dev-mode.Absolute/explicit mapping is being exposed from closure to dev-mode files in the new angular. This feature has been developed aiming at the development of tools which are responsible for translation of production built inputs into their dev-mode counterparts.
6. Localization
- Aiding to merging of multiple translation files. This feature is marked by the ability to support the merging of multiple translation files. In previous versions, only one translation file could be loaded. Now, with this feature, users can specify multiple files per locale, and the translations received from each of the files will be merged into one by a message ID. The merging is on the first-wins approach. Hence, if you desire to merge three files, for example — "a.xlf”, "b.xmb", and "c.json" — then any message from "a.xlf” will be used rather than a message from "b.xmb" or "c.json" … and so on. To put this simply, in practice, you should place the most important files first, with fallback translations later.
- Guard returning.For the router, the CanLoad guard now can return Urltree. This returning function discards the current navigation and redirects. This behavior matches to the current behavior available to CanActivate guards, that as well have been added to the new angular. This does not cause any impact on preloading. A CanLoad guard blocks any kind of preloading, resulting in prevention of preload of any routes with a CanLoad guard, and the guards won’t be processed as a part of preloading.
Performance improvements
Mentioned below are some of the improvements made to the latest version of angular in the aspect of its performance. Each of them are described in brief:- Another improvement is that it allows immediate reporting of stale lock files. In addition to this, a parsed .tsconfig file is also cached between runs.
- It has reduced the size of the entry-point manifest file. The base paths for package and entry points are known, so it is not necessary to store these in the file. This avoids unrequired storing of empty arrays. Previously, even if an entry point didn’t require any processing, ngcc would parse the files of the entry point to compute dependencies, which would consume a lot of time for processing large node modules.
- In order to improve performance, the computation of basePaths has been made lazy, so work is only done if needed in TargetedEntryPointFinder. In older versions, basePaths was computed whenever the finder was mapped out, which was a complete waste of effort, especially when the targeted entry point had already been processed.
Breaking changes
2. Strict
When creating and Angular app with the CLI you can add the new flag --strict ng new --strict to enable:
- Strict mode in TypeScript
- TSLint prevent the use of type any
- 500kb maximumWarning budget vs 2mb in normal app
- New package.json within app folder enabling advanced tree-shaking by setting side-effect to false
ng new --strict
3. Default Browser Configuration
- The browser configuration for new projects has been updated to eliminate older, less-used browsers. Support is deprecated for Internet Explorer 9, Internet Explorer 10, and Internet Explorer Mobile.2.
- Angular have been deprecated IE 9 & 10. However if you need to support such browsers they can be re-added via the .browserslistrcfile.
- To get the exact list of supported Web browsers, just execute the following command in your project:
npx browserslist
5. TSlib, the runtime library for TypeScript containing helper functions, has been updated to v2.0.
6. The TSLint static analysis tool for TypeScript has been updated to v6.
7. Angular Package Format no longer includes ESM5 or FESM5 bundles, which saves download and install time when running yarn or npm install for Angular packages and libraries.
6. The TSLint static analysis tool for TypeScript has been updated to v6.
7. Angular Package Format no longer includes ESM5 or FESM5 bundles, which saves download and install time when running yarn or npm install for Angular packages and libraries.
8. Service workers : Previously, Vary headers would be taken into account when retrieving resources from the cache, completely preventing the retrieval of cached assets (due to ServiceWorker-implementation details), that would lead to unpredictable behavior due to inconsistent/buggy implementations in different browsers. Now, Vary headers are ignored when retrieving resources from the ServiceWorker caches, which can result in resources being retrieved even when their headers are different. If your application needs to differentiate its responses based on request headers, please make sure that the Angular ServiceWorker is configured to avoid caching the affected resources.
9. Router : Any resolver that returns EMPTY will cancel navigation. If you want to allow the navigation to continue, you’ll need to update the resolvers to result to some value, (i.e., defaultIfEmpty(...), of(..), etc).
10. Common : Logic has been updated, which were responsible for formatting day periods that cross midnight. When formatting a time with the b or B format code, the rendered string wasn’t properly handling day periods that spanned days. Instead, the logic was falling back to the default case of AM. This logic has been updated so it matches times within a day period that extends past midnight, so it’ll now render correct output, such as at night in the case of English. Applications using either formatDate() or DatePipe or the b and B format codes will be affected by this change.
11. Core:
- Warnings about unknown elements are now logged as errors. This won’t break your app, but it may trip up tools that expect nothing to be logged via console.error.
- Angular npm packages no longer contain JSDoc comments to support the Closure Compiler’s advanced optimizations. The support for the Closure Compiler in Angular packages has been experimental and broken for quite some time. As of TS3.9, Closure is unusable with the JavaScript emit. For more information and updates, follow this link.
- If you were using the Closure Compiler with Angular in the past, you’ll likely be better off consuming Angular packages built from sources directly rather than consuming the version on npm, which is primarily optimized for a webpack/Rollup + terser build pipeline. As a temporary workaround, you might consider using your current build pipeline with Closure flag --compilation_level=SIMPLE. This flag will ensure that your build pipeline produces buildable and runnable artifacts, at the cost of an increased payload size due to advanced optimizations being disabled.
- Generic has been made mandatory for ModuleWithProviders. A generic type parameter has been required for the ModuleWithProviders pattern to work with the Ivy compilation and rendering pipeline, but before this commit, View Engine allowed the generic type to be omitted. If a developer is using ModuleWithProviders without a generic type in your application code, a version 10 migration will update the code for you. However, if a developer is using View Engine and, depending on a library that omits the generic type, you’ll now get a build-time error similar to: error TS2314: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s).
- In this case, ngcc won’t help you (because it’s Ivy-only), and the migration only covers application code. You should contact the library author to fix their library to provide a type parameter when they use this class. As a workaround, skipLibChecks could be set to false in the .tsconfig file or you can update your app to use Ivy.
Bug fixes
1. Router: UrlMatcher is now allowed to return null
3. Service workers: Prevent SW registration strategies from affecting app stabilization .
4. A number of bug fixes have been made, including the compiler avoiding undefined expressions in a holey array and the core avoiding a migration error when a nonexistent symbol is imported. There’s also a workaround in the core for the terser inlining bug. Another bug fix properly identifies modules affected by overrides in TestBed.
The Compiler-Compatibility Problem
A compatibility functionality is needed to gradually migrate to Ivy without breaking changes. It guarantees that Ivy and non-Ivy libraries can coexist during the migration period.All Angular codes are not compiled at the same time. Applications have dependencies on shared libraries, and those libraries are published on npm in their compiled form and not as TypeScript source code. Even if an application is built using ngtsc, its dependencies may not have been made using the same.
If a particular library wasn’t compiled with ngtsc, it wouldn’t have anticipated decorator properties in its .js. Linking it against a dependency that wasn’t compiled in the same way will fail at runtime.
Converting pre-Ivy code
Since Ivy code can only be linked against other Ivy code, all pre-Ivy dependencies from npm must be converted to Ivy dependencies in order to build the application. This transformation must happen as a precursor to running ngtsc on the application, and future compilation as well as linking operations need to be made against this transformed version of the dependencies.How to update to version 10
ng update @angular/cli @angular/core
For more updates please follow us on :
Facebook : https://www.facebook.com/dorado2041
Instagram : https://www.instagram.com/dorado2041
Blogger : https://doradosolutions.blogspot.com
No comments: