In the latest State of Angular Ecosystem, core contributors of major Angular ecosystem projects shared their thoughts on the new APIs released with Angular 14, and how the community is integrating or updating other libraries like NgRx, Nx, Ionic, and RxJS for the release.
Panelists also talked about community initiatives and trainings in Angular, including NG Girls and This Is Angular.
Here is a complete list of the hosts and panelists that participated in the online event.
- Tracy Lee, CEO, This Dot Labs, @ladyleet
- Nacho Vazquez, Senior Software Engineer, This Dot Labs, @nacho_devc
- Ben Lesh, RxJs Core Team Lead, @BenLesh
- Mike Ryan, Principal Architect, LiveLoveApp & Co-creator, NgRx, @MikeRyanDev
- Liam DeBeasi, Lead Developer, Ionic Framework, [@LiamDeBeasi] (https://twitter.com/LiamDeBeasi)
- Juri Strumpflohner, Director of Developer Experience at Nrwl, @juristr
- Jordan Powell, DX Engineer at Cypress.io, @JordanPowell88
- Shmuela Jacobs, Web Development Consultant, Founder at ngGirls, @ShmuelaJ
- Erik Slack, SE Technical Lead at Cisco, Co-Producer of NgXP.show, @erik_slack
- Lars Gyrup Brink Nielsen, Co-Founder of This is Learning, @LayZeeDK
Libraries And Tools
NgRx with Angular 14
NgRx 14 is in its beta version, and contributors are working on integrations and features, including adopting Angular 14, to highlight both the store package and the NgRx Components Package.
The NgRx Store package update will include a number of features and benefits: The team is working to make it easier to implement an NgRx Store, requiring less code.
createActionGroup() function to simplify and reduce the amount of code it takes to create a group of actions for an NgRx Store.
NgRx ESLint Plugin will be added to your project automatically when you install an NgRx store to help improve code implementation best practices.
NgRx Component Package
NgRx Component is a project that looks toward the future of Angular by improving the process of developing Reactive components using Observable.
NgRx Component is completely separate from NgRx store, and it features new improvements, including:
- Type checking templates
- More control for error handling
- Improved performance when you don’t have Zone.js
Make sure to check out NgRx 14.0 beta
ng add @ngrx/store@next.
Nx with Angular 14
Nx version 14 was released three weeks ago, with a minor release (14.2) soon following.
With these products, the team focused on reducing configuration for Nx to make it simple to just install Nx in a project, and start working with it immediately.
Other updates include:
Nx.json file is optional with this release
It comes with Angular 14 out of the box
ng update for automatic migration to the latest Angular version
It includes TypeScript 4.7 support
Storybook 6.5 support and upgraded Prettier
Preparation for integrating the just released Cypress 10 is on the way
Nrwl has now officially taken over the stewardship of Lerna.js. Nx was always able to integrate with Lerna directly to publish features, bootstrap, and use Nx for task scheduling.
It was only made official recently when the main readme was updated, but Nrwl has already maintained Lerna for a couple of years.
The purpose of this is to help the Lerna community continue to evolve. The team already made some updates, released version 5 with security patch support, and deprecated some old packages.
Additionally, they removed support for old Node versions, and improved the developer experience.
Nrwl has a roadmap for upcoming Lerna features that you can check out. For version 5.1, the team added a very easy opt-in feature for Nx which allows developers to install Nx and start using it without the need for configurations. However, this version allows developers to still have the Lerna commands with Nx as an additional package.
At the most recent Ionic Conf, we learned that Ionic and Angular power about 10% of Apps on the Apple App store, and 20% on the Google Play Store.
Ionic 6.1 was released with a number of improvements to UI Components. Ionic is working on a Component Playground feature to be released under the Ionic docs website soon. This feature will help developers interact with the UI, see exactly what it will look like, and switch between iOS mode, Material Design mode, or Dark and Light Design modes.
With Capacitor, the Ionic team announced the Native Google Map plugin, a highly requested plugin from the community.
Ionic’s next release will come with Angular 14 support.
Angular Girls (Ng Girls)
Ng Girls is an organization that trains women on the fundamentals of Angular. As physical events return, the team is working on workflows and processes to make it easy to join or host mentoring sessions for Ng Girls.
This Is Angular
This Is Learning is the non-profit organization behind the “This is Angular” course. All of the courses on This is Learning are free for anyone, and are also available for anyone to contribute to. Check out the website This Is Learning to learn more!
Changes to Angular for Library Authors
It is highly recommended that library authors who are not using IVY compilation yet migrate to the latest version before Angular compatibility support is officially removed. This removal could render such libraries unusable with new versions of Angular.
The new Standalone APIs give library authors the opportunity to provide independent configuration functions that can be used without the need for Ng Modules. The independent
inject function constructors and property initializers allow library authors to try out new patterns that are best suited for libraries and Angular applications.
This Dot Labs recently released Starter.dev in beta, which offers starter kits in a variety of languages that allow developers to figure out architecture configurations.
Starter.dev has a starter kit for Angular and it is available to test. Check out https://starter.dev to learn more.
Our event concluded with the announcement of a new book called The Angular Developer's Nx Handbook by Lars Gyrup Brink Nielsen.
*This Dot Labs is a modern web consultancy focused on helping companies realize their digital transformation efforts. For expert architectural guidance, training, or consulting in React, Angular, Vue, Web Components, GraphQL, Node, Bazel, or Polymer, visit thisdot.co. *