angular 12 что нового
Дополнительные улучшения сборки, Angular 12, распределенное выполнение задач и многое другое в Nx 12.3!
Nx 12.3 включает в себя множество новых функций, в том числе инкрементные улучшения сборки, Angular 12, распределенное выполнение задач и многое другое!
Если вы не знакомы с ним, узнайте о Nx на страницах nx.dev/angular и nx.dev/react.
Дополнительные улучшения сборки
Nx уже поддерживает инкрементные сборки, и для улучшения этой функции мы ввели целевые зависимости. Цель каждого проекта теперь может объявлять другие цели, от которых зависит проект, что означает, что эти цели выполняются до того, как цель проекта будет запущена.
Поддержка обновления до Angular версии 12
Nx также помогает пользователям автоматически переходить с TSLint на ESLint. Смотрите видео ниже для пошагового руководства.
Миграция приложений Angular с TSLint на ESLint
В качестве дополнительного примечания, пользователи Storybook 5 должны обновиться до Storybook 6.2+ перед обновлением до Angular 12. Это необходимо, потому что Storybook 6.2+ необходим для поддержки Webpack 5+. Более подробную информацию о том, как вы можете выполнить обновление, см. в нашем руководстве по переходу с 5 на 6.
Другие основные моменты
Каждый выпуск Nx также содержит дополнительные незначительные функции и исправления ошибок. Некоторые примечательные особенности включают в себя:
Как обновить Nx
Обновление Nx выполняется с помощью следующей команды и обновит ваши зависимости и код до последней версии:
После обновления ваших зависимостей запустите все необходимые миграции.
Распределенное выполнение задач для Nx Cloud
Посмотрите, как Виктор Савкин демонстрирует эту новую функцию с помощью репозитория Nx GitHub.
DTE сейчас находится в частной бета-версии, скоро станет общедоступной и будет бесплатной для проектов с открытым исходным кодом.
News Ycombinator
от admin
Давайте посмотрим на некоторые новые функции Angular в его версии 12.
Angular, фреймворк Google JavaScript (TypeScript) для создания веб-приложений для мобильных или настольных ПК, имеет более 73000 звезд на GitHub и поддерживается командой Angular в Google и множеством членов сообщества и организаций. 12 мая 2021 года была выпущена версия Angular 12 — насколько это круто?
Это обновление направлено на укрепление Ivy с мандатом Ivy Everywhere, и большинство новых функций ориентировано на это.
Плющ везде
Первое, что следует отметить, это то, что View Engine, который был средством визуализации Angular по умолчанию до Ivy, теперь официально устарел. Это делает Ivy новым средством визуализации Angular для всех новых проектов Angular, начиная с версии 9.
Это означает, что в следующем крупном выпуске Angular View Engine будет удален из Angular. Текущие библиотеки, использующие View Engine, по-прежнему без проблем работают с приложениями Ivy, но авторам, владеющим этими библиотеками, рекомендуется начать строить планы перехода.
Новые возможности языковой службы Ivy
Как мне перейти на угловую версию 12?
и глобально вы можете запустить эту команду:
Прощай, транспортир 👋
RFC был опубликован Angular, чтобы определить, в каком будущем Protractor должен двигаться вперед в качестве инструмента тестирования. Angular, как вы, возможно, уже знаете, хорошо работает с другими инструментами, такими как Cypress, WebdriverIO и TestCafe, и команда все еще изучает мысли и комментарии сообщества Angular.
Тем не менее, тем временем было принято решение не включать Protractor в новые проекты Angular по мере их создания в дальнейшем. Команда все еще проводит обзоры, и скоро ожидается больше новостей об окончательном решении по Protractor, вероятно, в следующем обновлении.
Изучение Angular еще проще
Одним из нововведений, появившихся в результате улучшения документации, является новый раздел документации с руководствами и видео. Это супер круто, и вы должны убедиться в этом сами — ссылки на ошибки показывают сообщения об ошибках и видео с подробным описанием действий по их устранению. Это первая документация по фреймворку, которую я видел лично, и это довольно круто.
Прекращение поддержки IE11
Angular также склоняется в том же направлении, удаляя поддержку устаревших браузеров, таких как Internet Explorer. Новое предупреждение об устаревании теперь будет добавлено для IE11, начиная с этой новой версии Angular. Поддержка будет полностью удалена к версии 13.
Улучшения вокруг стилей
Несколько ключевых улучшений были внесены в стиль в Angular. Одним из них является то, что Angular теперь поддерживает встроенный SASS в поле стилей вашего декоратора компонентов без необходимости добавлять какой-либо параметр inlineStyleLanguage в ваш файл angular.json.
Поддержка Tailwind CSS также входит в эту версию. Видя, насколько популярным становится сообщество Tailwind, это блестящий ход команды Angular. Вы можете начать с загрузки пакета из npm здесь, а затем инициализировать файл в своем проекте.
Нулевое слияние уже наступило!
Что превращается во что-то намного более чистое:
Обновите свое приложение Angular, и вы можете сразу же начать использовать этот оператор, чтобы упростить свои условные операторы. Этот оператор TypeScript уже давно отсутствует, и включение его в Angular делает его еще более увлекательным и удобным для тысяч разработчиков, которые уже используют Angular.
Переход с устаревших идентификаторов сообщений i18n
Эта новая версия Angular поставляется с переходом от устаревших форматов идентификаторов сообщений i8n к новым. У старых неоднократно возникали проблемы с белым интервалом, выражениями ICU и шаблонами форматирования. Новый вариант намного более интуитивно понятен и каноничен и, таким образом, уменьшает количество недействительных ошибок, возникающих из-за неправильных переводов или повторных переводов, которые не соответствуют таким вещам, как пробелы. Эти изменения вступили в силу с версии 11, и теперь были созданы инструменты для миграции и существующих проектов.
Заключение
Это был обзор новых функций, поставляемых с последней версией Angular, 12.0. Для меня оператор nullish — моя любимая функция, а крутые видео, которые теперь доступны в документации Angular, — на втором месте. Какие твои?
What’s New in Angular 12
Let’s take a look at some of the new features of Angular in its version 12 release.
Angular, Google’s JavaScript (TypeScript) framework for building web applications for mobile or desktop, has over 73,000 stars on GitHub and is maintained by the Angular team at Google and a host of community members and organizations. Angular Version 12 was released on the 12th of May 2021—how cool is that?
This update focuses on solidifying Ivy with the Ivy Everywhere mandate and most of the new features are geared toward that.
Ivy Everywhere
The first thing to note is that the View Engine, which was Angular’s default renderer before Ivy, is now being deprecated officially. This makes the Ivy the new Angular renderer for all new Angular projects starting from version 9.
What this means is that in the next major release of Angular the View Engine will be removed from Angular. Current libraries using the View Engine still work with Ivy apps seamlessly, but authors who own these libraries are advised to start making transition plans.
New Features of Ivy Language Service
How Do I Upgrade to Angular Version 12?
As always, the best way to upgrade your project from one version to another version is to check the official Angular update guide in the link here. If you already use version 11, you can just use this command in your terminal to update a project to 12:
and globally you can run this command:
Goodbye Protractor 👋
An RFC was shared by Angular to determine what the future of Protractor should be moving forward as a testing tool. Angular, as you might know already, works well with other tools like Cypress, WebdriverIO and TestCafe, and the team is still reviewing thoughts and comments from the Angular community.
However, a decision has been made in the meantime not to include Protractor in new Angular projects as you generate them moving forward. The team is still going through reviews, and more news on the final decision on Protractor is expected soon, probably in the next update.
Learning Angular is Even Easier
One of the things the Angular team does is to ensure that, with every version, learning Angular is easier and easier as you go. The developer learning experience for Angular is a top priority for them, and so the Angular docs are always being worked on. There is a content projection guide added to the docs now, available here, with cool examples and even more content in the docs coming soon.
The team is also making sure communication is a two-way street, ensuring that members of the Angular community can be part of this easy learning curve path. To that end, there is now a contributor’s guide on the docs so that anyone in the Angular community—like you reading this—can suggest improvements to the docs. You can have a look here, and, if you do have any suggestions, this is an easy way to reach the team.
One of the innovations that has come from the docs improvement is the new guides and videos section of the docs. This is super cool and you’ll have to see for yourself—the error references show error messages and the video breakdown of what to do to solve them. This is a first for a framework doc that I have seen personally, and it is pretty cool.
Deprecating Support for IE11
Internet Explorer as we know it is in its last days, and support for IE has not been easy while building for the web. Earlier in the year, we saw Microsoft 365 apps like Teams discontinue support for IE11 and how the Microsoft team is pulling IE entirely out of its ecosystem one year from now.
Angular is also leaning the same direction of removing support for legacy browsers like Internet Explorer. A new deprecation warning message will now be included for IE11 starting from this new version of Angular. Support will be removed entirely by version 13.
Improvements Around Styles
A few key improvements were made around styling in Angular. One of them is that Angular now supports inline SASS in the styles field of your component decorator without having to add any inlineStyleLanguage option to your angular.json file.
Support for Tailwind CSS also shipped with this version. Seeing how popular the Tailwind community is getting, this is a brilliant move by the Angular team. You can start by downloading the package from npm here and then initializing the file in your project.
Nullish Coalescing Is Here Now!
Which turns into something much cleaner:
Update your Angular app and you can start using this operator right away to simplify your conditional statements. This TypeScript operator has been out for a while now, and getting it into Angular makes it even more fun and usable for thousands of developers who already use Angular.
Transitioning From Legacy i18n Message IDs
This new version of Angular ships with migrating from legacy i8n message ID formats to new ones. The old ones have had issues repeatedly around white spacing, ICU expressions and formatting templates. The new one is way more intuitive and canonical, and so reduces invalidations that come from wrong translations or retranslations that do not match things like white spaces. These changes have taken effect from version 11, and now tooling has been built to migrate existing projects too.
Conclusion
This has been an overview of the new features that shipped with the latest version of Angular, 12.0. For me, the nullish operator is my favorite feature, and the cool videos now available in the Angular docs are a close second. What are yours?
Nwose Lotanna Victor
Nwose Lotanna Victor is a web technology enthusiast who documents his learning process with technical articles and tutorials. He is a freelance frontend web developer based in Lagos, Nigeria. Passionate about inclusion, community-building and movies in Africa, he enjoys learning new things and traveling.
Angular v12 is now available
It’s that time again, friends — we’re back with a new release and we can’t wait to share all the great updates and features waiting for you in Angular v12.
Before we dive into those updates, let’s check in on the Angular journey. A vital key to Angular’s future is Ivy and what it unlocks for the platform. We have been working over recent releases towards the goal of converging the Angular ecosystem on Ivy. We like to call this approach “Ivy Everywhere”.
Here are the changes we are making to enable this transition.
Moving Closer to Ivy Everywhere
The key moment in the next evolution of Angular has finally arrived — we are finally deprecating View Engine. This is what it means for the community.
We wrote a blog post providing details about this change and what it means for library authors and more.
Transitioning from Legacy i18n Message IDs
Currently, there are multiple legacy message id formats being used in our i18n system. These legacy message ids are fragile as problems can arise based on whitespace and the formatting templates and ICU expressions. To solve this problem we’re migrating away from them. The new canonical message id format is much more resilient and intuitive. This format will reduce the unnecessary translation invalidation and associated retranslation cost in applications where translations do not match due to whitespace changes for example.
Since v11, new projects are automatically configured to use the new message ids and we now have tooling to migrate existing projects with existing translations. Find out more here.
The Future of Protractor
The Angular team has been working with the community to determine the future of Protractor. We’re currently reviewing the feedback shared in the RFC. We’re still figuring out the best future for Protractor. We’ve opted to not include it in new projects and, instead, provide options with popular 3rd party solutions in the Angular CLI. We are currently working with Cypress, WebdriverIO, and TestCafe to help users adopt the alternative solutions. More information to come as this develops.
Nullish Coalescing
Now, in templates, developers can use the new syntax to simplify complex conditionals. For example:
Give this a try today and let us know what you think!
Learning Angular
We’re always working to improve the Angular learning experience for developers. As part of this effort, we have made some meaningful changes to our documentation. We wrote a content projection guide, with more new content in the works.
But there’s more to this story. We’ve gotten lots of feedback and questions asking how you can help us improve documentation. Great news, we’ve updated angular.io with a contributor’s guide that will help people looking to improve the docs. Check it out and help us make the docs better.
One more thing here — since our last major release, we’ve included guides and videos for error messages. The community has found this to be incredibly helpful so if you haven’t seen them, definitely check them out!
Stylish Improvements
In the v11.2 release, we added support for Tailwind CSS. To get started using it in projects: install the tailwindcss package from npm and then initialize Tailwind to create the tailwind.config.js in your project. Now, teams are ready to start using Tailwind in Angular.
Angular CDK and Angular Material have internally adopted Sass’s new module system. If your application uses Angular CDK or Angular Material, you’ll need to make sure you’ve switched from node-sass to the sass npm package. The node-sass package is unmaintained and no longer keeps up with new feature additions to the Sass language.
Additionally, both Angular CDK and Angular Material expose a new Sass API surface designed for consumption with the new @use syntax. This new API surface provides the same features, but with more meaningful names and more ergonomic entry points. All of the guides on material.angular.io have been fully rewritten to showcase this new API surface, as well as provide more detailed explanations of theming concepts and APIs.
More Great Features
Let’s take a look at some of the other great updates that have made it into this release:
Deprecating Support for IE11
Angular is an evergreen platform, meaning that it stays up-to-date with the evolving web ecosystem. Removing support for legacy browsers allows us to focus our efforts on providing modern solutions and better support to developers and users.
We are going to start including a new deprecation warning message in Angular v12 — and remove support for IE11 in Angular v13.
You can view our decision rationale by going to this RFC.
Support From the Community
The Angular community has been hard at work improving the Angular experience for everyone by contributing to the framework — thank you! Here are some of the PRs that have been landed thanks to your incredible work:
Conclusion
The Angular team has been hard at work serving the community in many areas. Be sure to follow us on Twitter for updates and on our revamped YouTube channel for fresh new content.
Which feature are you most excited about for v12? Comment on this post and let us know.
Thank you so much for being a part of the incredible Angular community. Until the next time, go build great apps!
Top 10 New Features Of Angular 12
The latest update of Google’s popular TypeScript-based web framework Angular v12 has been released on the 12th of May 2021 and is currently accessible as a production release. Among different enhancements, the upgrade deprecates the inheritance View Engine assemblage and delivering pipeline for the more current Ivy technology.
History of angular’s versions and LTS Support
Version | Status | Released | Active Ends | LTS Ends |
---|---|---|---|---|
^12.0.0 | Active | May 12, 2021 | Nov 12, 2021 | Nov 12, 2022 |
^11.0.0 | LTS | Nov 11, 2020 | May 11, 2021 | May 11, 2022 |
^10.0.0 | LTS | Jun 24, 2020 | Dec 24, 2020 | Dec 24, 2021 |
^9.0.0 | Not Supported | Feb 06, 2020 | ||
^8.0.0 | Not Supported | May 28, 2019 | ||
^7.0.0 | Not Supported | Oct 18, 2018 | ||
^6.0.0 | Not Supported | May 04, 2018 | ||
^5.0.0 | Not Supported | Nov 01, 2017 | ||
^4.0.0 | Not Supported | Mar 23, 2017 | ||
^2.0.0 | Not Supported | Dec 16, 2016 | ||
^1.0.0 | Not Supported | Oct 20, 2014 |
Angular version 12 is accessible on GitHub, following various beta deliveries and release candidates. Angular 12 draws nearer to an «Ivy all over» vision for the structure. Ivy is portrayed as a cutting-edge gathering and delivering pipeline, offering quicker AOT compilation. The Angular group noticed that View Engine will be taken out in a future delivery. Current libraries utilizing View Engine will in any case work with Ivy applications. however, library creators are encouraged to begin transitioning to Ivy.
The legacy version of Angular 11 was launched on November 11, carrying improvement to composing of regular lines and bug fixes that guarantee TestBed isn’t started up after the override provider; It presents updates across the stage including the structure, the CLI, and components. The angular latest version follows similar upgrades with the contribution of stricter types and better router performance.
Latest Features of Angular 12
There are a few other new changes in the system, other than the router performance upgrades, and stricter sorts, which is added for DatePipe and number lines to get misuses, like passing an array at an accumulated time. So let’s learn what’s new in Angular 12?
Ivy Everywhere: Angular v12
The View Engine has finally been deprecated in Angular version 12. The community has been working over ongoing deliveries towards the objective of combining the Angular ecosystem on Ivy. They call this methodology «Ivy Everywhere».
Migrating from legacy i18n message IDs
As of now, there are different legacy message-id designs being utilized in the i18n framework. These legacy message-ids are delicate as issues can emerge dependent on whitespace and the organizing formats and ICU expressions. To tackle this issue the Angular team is relocating away from them. The new standard message-id design is considerably more tough and natural. This configuration will diminish the superfluous translation invalidation and related retranslation cost in applications where translations don’t coordinate due to whitespace changes for instance.
Since Angular version 11, new tasks are naturally designed to utilize the new message ids and they presently have the tooling to move existing ventures with existing translations.
Protractor: planning for future
The team has been working with the community to decide the eventual fate of the Protractor. They are right now exploring the feedback shared in the RFC and sorting out the best future for Protractor. This is one of the latest features of Angular 12. The team have chosen to exclude it in new tasks and, all things considered, furnish alternatives with famous 3rd party solutions in the Angular CLI. The team is presently working with Cypress, WebdriverIO, and TestCafe to assist angularjs development company with receiving elective solutions. More data to come as this develops.
Nullish Coalescing
The nullish coalescing operator (??) has been assisting engineers with composing cleaner code in TypeScript classes for some time now. One of the main highlights of this feature is that you can bring the force of nullish coalescing to Angular templates in v12!
Presently, in templates, engineers can utilize the new syntax structure to improve the complex conditionals. For instance:
Improvements in styling
In Angular v12, Components will have support for inline Sass in the styles field of the @Component decorator. Already, Sass was just accessible in outside resources because of the Angular compiler. You can empower this component in your current applications simply by adding «inlineStyleLanguage»: «scss» to angular.json. Else, it will be accessible to new tasks utilizing SCSS.
Angular CDK and Angular Material have adopted Sass’ new module framework internally. If your application utilizes Angular CDK or Angular Material, you’ll need to ensure you’ve changed from node-sass to the sass npm package. The node-sass package is unmaintained and no longer stays aware of new feature additions to the Sass language.
While updating your application to the angular latest version, It will consequently change to the new Sass API by refreshing your application with ng update. This order will refactor any Sass @import expressions for Angular CDK and Angular Material code over to the new @use API, as both Angular CDK and Angular Material uncover another Sass API surface intended for utilization with the new @use language structure. Here’s an illustration of the before and after.
Deprecating support for IE11
Angular is an evergreen platform, implying that it keeps up with the advancing web ecosystem. Eliminating support for legacy browsers permits us to focus on giving modern solutions and better help to engineers and clients. The team has also included a new deprecation warning message as another Angular 12 feature — and eliminate support for IE11 in Angular v13.
Support from the Community
The Angular team has been working diligently for improving the Angular experience from angular versions 6,7,8 & 9 for everybody by adding to the structure. They are continually attempting to improve the Angular learning experience for developers as well. As a part of Angular 12 new features, they have rolled out some significant improvements to their documentation. They have also updated the angular.io contributor’s guide that will help individuals hoping to improve the docs.
Strict by default
The strict mode of Angular has now been enabled by default in the CLI as one of the features of Angular 12.
Strict mode improves maintainability and assists you with catching the bugs early in the process. Moreover, strict mode applications are simpler to statically examine and can help the ng update command refactor code more securely and accurately when you are updating to the latest versions of Angular.
Use the following command to create a new workspace and application:
Run the following command when you want to create a new app within an existing non-strict workspace in the strict mode:
Production build by default
Up to this point, running the ng build command made an improvement towards a development build. In Angular version 12, ng build will default to a production build. Ideally, it will assist a few groups with abstaining from tragically building and conveying development builds to production environments.
HTTP improvements
Angular 12 features a number of upgrades around its HTTP support. Let’s have a look:
Metadata for requests and interceptors
To start with, the HttpClient would now be able to be utilized to store and recover custom metadata for requests. This is especially helpful for HTTP interceptors. This capacity can be utilized through the new HttpContext.
Presently, the distinctive HTTP strategies given by HttpClient incorporate another specific circumstance: HttpContext alternative, which we can use to pass in a map.
appendAll on HttpParams
The HttpParams class presently has another appendAll technique, which can be utilized to effortlessly add a bunch of boundaries without a moment’s delay:
HttpStatusCode
Angular 12 features its own list of intelligible names for HTTP status codes, in the form of a const enum. Because of this new element, we can now utilize HttpStatusCode instead of introducing our own solution to have human-readable names
ng API improvements
The ng troubleshooting API that we can use from the program dev tool is an improved feature of Angular 12. There are a few functionalities that have been implemented namely getDirectiveMetadata and esetProfiler to debug APIs for structural inspection of applications. The getDirectiveMetadata can be utilized to recover data about parts and directives. The esetProfiler can be used to trace template creation durations, lifecycle hooks processing, and template updates. The API can give an insight into the working of the applications at runtime.
New Dev Tools
A couple of days after the release of Angular 12, the Angular group has reported the accessibility of Angular Dev Tools for Google Chrome. The embedded profiler can preview and record the change detection events which can be monitored as to which detection cycle and components took the longest time. Earlier the Angular community had semi-official Dev Tools which were not compatible with Ivy. So this is a win-win situation for all.
Angular Universal
One of the major improvements of the Angular 12 feature is Inline critical CSS that is by default in the nguniversal/common. The Angular universal now supports proxy configuration in ssr-dev-server builder. It has also updated schematics to use defaultConfiguration. This version supports an SSR engine called Clover along with a new engine which seems promising. The new engine aims to simplify things to generate application shells without an extra build and remove the requirement for multiple builds for SSR/prerender. The version also supports TLS for the dev-server.
Typescript 4.2
One of the major updates in the feature of Angular 12 is the support of Typescript 4.2. The stable version was released on the 23rd of February. There are some exciting features and breaking changes in this version. Let’s find out the features of Typescript 4.2 and how this version will impact developers and Angular 12.
Changes in Tuple Types
Tuples are helpful datatypes in programming whenever developers need to return different outcomes from a function. As they’re constant, tuples can use as keys for dictionary-type word reference. One of the vital highlights of TypeScript is that tuples can have discretionary and optional components and rest components, which is fantastic for readability and tooling.
Abstract Construct Signatures
Abstraction is one of the major features of TyepScript 4.2. TypeScript permits designers to utilize the theoretical modifier to check a class as abstract. To make occasions to extract properties and practices of abstract classes, engineers need to follow an essential OOP idea, which is to broaden the abstract class utilizing a subclass and startup objects. Mixins are one of the bleeding edge techniques for TypeScript, which is additionally identified with a similar subject.
Initially, while using mixins with abstract classes you could find some bugs. However, after version 4.2 developers can use the abstract modifier on constructor signatures.
Improvements for in operator
It is a mistake to utilize an essential variable on the correct side of an in-operator, an overall guideline in programming. Nonetheless, until version 4.2, it was not there in TypeScript.
However, with the new update, TypeScript is exacting to rules. So, the in-operator won’t go to permit crude information types on the correct side.
“test var” in 31 // will immediately lead to an error.
Improved Type Alias
In past forms, TypeScript didn’t resolve types effectively. In most scenarios, TypeScript will return the right types however not the substantial valid alias, prompting an absence of readability and repeat a similar code over and again. Currently, the re-aliasing of such kinds reliably receives and shows the new type alias.
Improvements to the compile process
When creating complex projects, at times it is difficult and tedious while looking for TypeScript file definitions. Mostly, it is a process of experimentation. However, with Typescript version 4.2, it is feasible to get names of documents that TypeScript finds as a piece of the project. Also, Typescript discovers explanations behind the documents to be important for the compilation process.
Webpack 5.37 support
Angular 12 features the production-ready experimental Webpack 5 support that was introduced in Angular 11. Webpack is the vital piece of the Angular CLI puzzle, and it plays a major part in bundle size, constructs execution, and so on. Webpack 5 is a significant delivery which is as it should be. It incorporates various breaking changes and features. The webpack 5 helps in Improving the build performance, long-term caching, compatibility with the Web platform, bundle size with better code generation.
Breaking changes in Angular 12
Animation:
In Angular version 12 features the DOM components that are presently accurately eliminated when the root view is taken out. If you are utilizing SSR and utilize the application’s HTML for delivery, you will be required to guarantee that you save the HTML to a variable prior to destroying the application.
It is additionally conceivable that tests could be unintentionally depending on the old conduct by attempting to discover a component that was not taken out in a past test. However, if that is the situation the failing tests ought to be updated to guarantee they have proper setup code which instates components they depend on.
Common:
Methods of the PlatformLocation class, specifically onPopState as well as onHashChange,used to return void. Presently those techniques return works that can be called to eliminate event handlers.
One of the main Angular 12 improvements is that the strategies for the HttpParams class currently acknowledged string | number | boolean rather than string for the value of a parameter. If you expanded this class in your application, you’ll need to update the signatures of your strategies to mirror these changes.
Angular no longer helps in maintaining Node v10. Previously the ng.getDirectives work tossed an error when in case a given DOM node had no Angular setting related to it. This conduct was conflicting with other troubleshooting utilities under ng namespace, which took care of the present circumstance without raising an exemption. As a major change in Angular 12, the ng.getDirectives work for such DOM nodes would bring about an empty array back from that function.
The type of the APP_INITIALIZER token has been changed to more precisely mirror the types of return values that are taken care of by Angular. Before this, each initializer callback was composed to return any, this is currently Promise | Observable | void.
In the unlikely event that your application utilizes the Injector.get or TestBed.inject API to infuse the APP_INITIALIZER token, you may have to refresh the code to represent the stricter type.
One of the most interesting features of Angular 10 was the use of the new IVY extractor to run ng x i18n in one of your applications. One of the new features of Angular 12 is that it no longer generates legacy i18n message-ids through linked libraries. For downstream applications providing translations for these messages, the localize-migrate command-line tool will help migrate their message ids.
Previously ‘min’ and ‘max’ attributes characterized on the were disregarded by the Forms module. Currently, the presence of these characteristics would trigger min/max validation logic (if formControl, formControlName or on the other hand ngModel orders are additionally present on a given input) and comparing form control status would mirror that.
Platform browser:
XhrFactory has been moved from @angular/normal/http to @angular/normal.
Router:
Strict invalid checks will give an account of part conceivably being invalid. The type of the RouterLinkActive.routerLinkActiveOptions input was extended to permit all the more adjusted control. Code that recently read this property may be updated to represent the new type.
Other minor updates in Angular 12
How to upgrade
Run the following command to update to Angular 12 from Angular 11. However, if you have Nx 12.3, note that it already supports Angular 12.
Conclusion:
Angular 12 has arrived with a pile of improvements to its performance, language service, compiler, form validation, and much more. The deprecation of the View engine and incorporation of the Ivy ecosystem is certainly one of the major enhancements considered in version 12. Along with this, Angular 12 has witnessed improvement in styling, Nullish Coalescing, and shifting from Legacy i18n Message IDs as some other important features that make this release a stable one. Additionally, Angular 12 features a variety of bug fixes, affecting the compiler, core, router, language service etc.