What’s New for the Angular Ecosystem (Ng-Conf 21 Update)
Consistency was the theme for this year’s Ng-Conf, usually the go-to event for all things Angular. This year’s event was held online for some very strange reasons we don’t yet know.
TL;DR: View Engine will be deprecated, All new libraries and apps will be built in Ivy. Ivy natively supported in Angular Language Service. Strict mode by default. Prod mode by default. Inline Sass. Error guides are a thing. Hello ESLint. Farewell Protractor. Native support for TailwindCSS. Reactive discussions. Please don’t remove Modules :O
Angular and its ecosystem are evolving, and for what it's worth, I’m both excited and a little concerned as to where that evolution may lead. Here is a summary of a few topics that were discussed in Ng-Conf this year:
- Ivy and View Engine
— From V12, View Engine will be deprecated, in preparation for an eventual removal from v13 onwards. Which makes Ivy the default now. View Engine can still be used with ngcc, though.
— Ivy will now be natively supported by the Angular Language Service as well, bringing better type checking and better IDE integration.
- Strict mode and prod mode
— From v12, strict mode will be the default for new Angular projects, and ng build will now build prod by default.
- Sass
— From v12, components templates’ inline styling will support Sass, which brings the same level of optimisation and transformations in production environments as writing styles in dedicated sass style files. Things like this will now be 1st class supported (code credits: ng-conf 2021):
- Error Guides
Error messages will come with much better explanations of what may have gone wrong, as well as links and even video material to help debug the most frequent ones (looking at youExpressionChangedAfterItHasBeenCheckedError)
- Webpack 5 Support
— From v12, Webpack 5 is the default in Angular. Support for webpack 5 brings plenty of features that deserve a whole article, one of which, which was mentioned briefly in ng-conf is Module Federation. Think of this as a way to package entire application builds as dependencies for another app, creating some sort of a multi-app app, for lack of a better term. This pattern will make more sense to those familiar with Micro-frontends, which is gaining popularity within the Angular community. The illustration below shows a monorepo with Nx and Angular using a similar pattern, taken from the book Enterprise Angular for Manfred Steyer.
- Hello Eslint
About time to leave Tslint behind (which was deprecated in 2019 btw). The Angular community now has straight-forward tooling to migrate from Tslint to Eslint. Checkout this github repo: https://github.com/angular-eslint/angular-eslint
A new project can be started with Eslint via these commands:
This means a few things, for instance, ng lint command is no longer configured for us out of the box by Angular, developers can choose a linting solution that fits their needs — don’t choose Tslint ;) —
- Bye Protractor
Protractor will be khalas (Arabic for gone/done for) by end of 2022. ng e2e will no longer work out of the box either, and rather give you the option to configure an e2e solution that works for you, like cypress.io or webdriver.io (I’m seeing a pattern where Angular is giving you options and not opinions, which reminds me of another JavaScript ̶f̶r̶a̶m̶e̶w̶o̶r̶k̶ library that I don’t remember the name of, ehm).
- Replace Sass @import with @use modules
@import syntax is no longer recommended by Sass, devs should now consider switching to use @use (eh) syntax which brings a few new possibilities like private members and namespacing, etc. This is optional for now.
P.S. if your project is using node-sass, consider switching to sass (that’s the package name on npm, I’ll link it here).
- TailwindCSS native support
— From v11.2, Angular supported TailwindCSS, and from v12, support will continue with even better tooling and configuration, simply run ng add ngx-tailwind and enjoy first class support for the future of css.
A few other points were briefly mentioned such as support for Trusted Types (not fully, yet). but I’ll stop this list here.
In the next few lines I’ll just give my opinion on some of the points that were mention ed by Stephen Fluin from the Angular Core team:
- Reactive Angular:
- Zones and Modules: I don’t mind getting rid of Zones, although this may give rise to libraries solving the complexities around having full control on change detection, which will ultimately lead us back to … zones. BUT PLEASE DON’T MAKE MODULES OPTIONAL. thanks.
RxJS
- What’s new for RxJS 7:
— it’s smaller, a lot smaller. version 7 comes at around 51kb, whereas version 6 was clocked at around 93kb. that’s almost half the size of v6. Let’s take a look at this comparison shown at the conference:
The promise (pun intended) is simple, the same power with smaller footprint.
v7 also brings better typescript typings (supporting TS v 4.2).
- New features, operators and stuff
There are a bunch of new features that come with v7, and also deprecated a few things, most notably toPromise() is now deprecated, in favour of two new features: firstValueFrom and lastValueFrom which are more tree-shakable. you can also provide a default value to each of these, as follows:
Version 7 also consolidates multicasting operators (multicast, publisReplay, shareReplay etc) into the now recommended share() with config options, something like the following:
This deprecates all of the multicasting operators except share and shareReplay.
v7 also introduces a new function: connectable(source$) which makes the source$ observable connectable.
The map looks like this:
more on RxJs 7 is found on the Ng-Conf Youtube Channel.
That’s all I wanted to share about the ecosystem for now. It’s an exciting time where Angular is opening up to new possibilities. However, it’s worth keeping in mind that what makes Angular special is its opinionatedness (if that is a word).
Because Angular is opinionated, developers find themselves in an environment with much less decision fatigue and trust the one way of doing things that Angular recommends. Stephen summed this nicely at the end of his talk, being opinionated is important, but only when there aren’t tradeoffs. Being opinionated does not mean being closed to any feedback or improvement where necessary.
Moving code is easy, moving developers is hard.
Thanks to the Angular Core team for their talks. I hope we get to go back to live events soon.
