A brief discussion of the new features in Angular10

This article will take you through the new features in Angular10. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Angular 10 is a major upgrade to the popular web development framework and is usually available as an official release on June 24th. The official version upgrade is based on the TypeScript-based framework developed by Google, which focuses more on quality, tools, and ecosystem improvement features than the new version.

Angular 10 is smaller than previous Angular versions. New features include a new date range picker and CommonJS import warnings in the Angular Material UI component library. CommonJS import warnings alert developers when using dependencies packaged with CommonJS that could result in larger, slower applications, allowing developers to replace ECMAScript module packages.

Related tutorial recommendations: "angular tutorial"

In addition, the optional strict settings provide a more strict project settings when creating a new workspaceng new, through ng new -- strict. Enabling this flag will initialize new projects with new settings to improve maintainability, help catch errors and allow the CLI to perform advanced optimizations on the application.

Where to download Angular 10

---

You can find the general release of Angular 10 on GitHub. To update your current Angular installation, you can run the following command:

ng update @angular/cli @angular/core

New Features in Angular 10

---

The main features of Angular 10 include:

• TSlib, the TypeScript runtime library containing helper functions, has been updated to TSlib 2.0. The TSLint static analysis tool for TypeScript has been updated to TSLint 6.
• Added a compiler interface that wraps the actual ngtsc compiler. The language service-specific compiler uses the project interface to manage multiple type checking files and create Scriptinfos as needed.
• The browser configuration for new projects has been updated to exclude older, less used browsers. Internet Explorer 9, Internet Explorer 10 and Internet Explorer Mobile are not supported.
• The Angular package format no longer includes ESM5 or FESM5 packages, saving downloads and installations when running yarn or npm install for Angular packages and libraries time.
• For the compiler, name scopes have been added for property reading and method calling.
• EntryPointFinder, which is a program-based entry point finder that can be seeded from imports in the program specified by the tsjconfig.json file. This is expected to be faster than DirectoryWalkerEntryPointFinder when the active program imports only a small subset of installed entry points.
• Autocomplete functionality has been removed from HTML entities such as &amp due to questionable value and performance issues.
• Explicit mapping from closure exposure to devmode file. This feature targets development tools that must convert production build input into equivalent devmode.
• One breaking change is to make ModuleWithProviders mandatory. In order for the ModuleWithProviders pattern to work with the Ivy compilation and rendering pipeline, generic type parameters are required, but prior to this submission, View Engine allowed generic types to be omitted. Version 10 migrations will update code if developers use ModuleWithProviders without generic types. However, if a developer uses View Engine and relies on a library that ignores generic types, a build error will be issued. In this case ngcc will not help and the migration will only cover the application code. Library authors should be contacted to fix their libraries. As a workaround, you can set skipLibChecks to false in tsconfig or update the application to only use Ivy. Now features TypeScript 3.9, and support for TypeScript 3.8 has been removed. This is a major change. TypeScript 3.6 and TypeScript 3.7 are also no longer supported.
• The performance of type checking has been improved to the compiler cli.
• To improve performance, the calculation of
basePaths
• has been deferred so that work is only done when TargetedEntryPointFinder is needed. Previously, basePaths was calculated whenever the finder was instantiated, which wasted effort when the target entry point had already been processed. Supports merging multiple translation files. Previously, only one translation file was allowed per locale. Users can now specify multiple files per locale, and transactions for each file will be merged by messaging ID.
• Asynchronous lock timeout can be configured. This adds support for the ngcc.config.js file for setting the
retryAttempts
• and retryDelay options. Integration tests have new timeout checks added and timeouts reduced using ngcc.config.js to prevent tests from taking too long. In a breaking change, warnings about unknown elements are now logged as errors. While this won't break the application, it may trigger some tools that expect nothing to be logged via console.error.
• In another breaking change, any parser returning
EMPTY
• will cancel navigation. In order for navigation to continue, the developer must update the parser to update certain values, such as default!Empty. Added dependency information and ng-content selector in metadata. The proposed compiler feature will provide additional metadata useful for tools such as Angular Language Service, with the ability to provide suggestions for directives/components defined in the library.
• Performance improvements are achieved through reduced entry point manifest size and caching techniques in the manifest. Also, the caching of dependencies is done in the entry point manifest and read from there instead of calculating it every time. Previously, even if the entry point did not need to be processed, ngcc (Angular Ivy Compatibility Compiler) would parse the entry point's file to calculate dependencies, which would take a lot of time for large_node modules.
• To improve ngcc performance, immediate reporting of stale lock files is now allowed. Additionally, a cached copy of the parsed tsconfig file is stored, which can be reused if the tsconfig path is the same.
• In one breaking change, the logic has been updated involving formatting daytime for midnight. When formatting a time using the
b
• or B format codes, the rendered string does not correctly handle daylight hours that span several days. Instead, the logic falls back to the default case of AM. This logic has been updated so that it matches the time of day after midnight, so it will now render the correct output, e.g. at nightat night in English.Applications that use formatDate() or DatePipe or b and B format codes will be affected by this change.
• For routers, the CanLoad protector can now return Urltree. Return CanLoadProtectionUrltree of UrltreeCancels the current navigation and redirects. This matches the current behavior available for CanActivate guards, which has also been added. This does not affect preloading. The CanLoad guard blocks any preloading; any route with a CanLoad guard will not be preloaded, and the guard will not be performed as part of the preload.
• Propagation of the correct value range in the ExpressionBinding of the microgrammar expression with the ExpressionBinding of ParsedProperty, which in turn will propagate the range to the template AST (VE and Ivy). This advice also applies to compilers.
• In a fix to the core, logic will be added to undecorated class migrations to decorate derived classes of undecorated classes that use Angular features.
• In breaking changes, Urlmatcher's type will reflect that it can always return null.
• For service workers, a situation has been fixed where the service worker may never register when a task is long-running or times out.
• Many bug fixes have been made, including the compiler avoiding undefined expressions in Kong arrays and the kernel avoiding migration errors when importing non-existent symbols. There is also a workaround in the core of the Terser inlining bug. Another bug fix correctly identifies modules affected by substitutions in TestBed.
• Angular NPM no longer includes certain jsdoc comments to support Closure Compiler’s advanced optimizations. This is a major change. Support for Closure Compiler in the package has been experimental and discontinued for some time. Anyone using Closure Compiler would be better off using the Angular package built directly from source rather than using the version published on NPM. As a temporary workaround, users may consider closing their current build pipeline with the Closure flag --compilation_level=SIMPLE. This flag will ensure that the build pipeline produces buildable, runnable artifacts but at an increased payload size due to advanced optimization being disabled.

Translated from: https://www.infoworld.com/article/3537449/whats-new-in-angular-10.html

The above is the detailed content of A brief discussion of the new features in Angular10. For more information, please follow other related articles on the PHP Chinese website!