The goal of selectorless is to remove the requirement for selectors in templates, enabling components to be referenced directly by their class names. An initial pull request has been merged, revealing the early direction Angular is pursuing for this functionality.
Selectorless
Angular 14 brought standalone components to the table. This eliminated the NgModule abstraction that had been a source of friction for the compiler.
With NgModules, the compiler had to track down the module to determine a component's dependencies, and that module typically lived in a separate file.
Bundlers today are optimized for working with single files, enabling parallel compilation. The ideal scenario is one where a file carries everything it depends on alongside it.
As we move closer to single-file compilation, the selector is the next hurdle to be cleared.
Templates reference dependencies through selectors. Although the TypeScript file imports the classes, that import alone falls short. Knowing a class's name doesn't reveal its selector.
To pinpoint the selector, the compiler must locate the class's file, which breaks the single-file compilation approach.
Here's an illustration:
import { ComponentA } from './component-a';
import { ComponentB } from './component-b';
@Component({
template: '<app-home />',
imports: [ComponentA, ComponentB]
})
class App {}
The compiler must determine which class corresponds to the selector app-home. Based solely on the data in this file, it cannot distinguish between ComponentA and ComponentB, so it has to scan through the imports to resolve the correct one.
The solution is straightforward: why rely on a selector? Instead, point directly to the class within the template. This is no different from how we've always referenced classes in TypeScript.
import { ComponentA } from './component-a';
import { ComponentB } from './component-b';
@Component({
template: '<ComponentA />'
})
class App {}
On top of that, when the class referenced in the template is unambiguous, the runtime benefits as well, resulting in improved performance.
Precisely this is the core idea behind selectorless.
Selectorless remains at an embryonic phase; down the road, an RFC will provide comprehensive specifics.
Selectorless template parsing
#60724
These changes are an initial implementation of the template parsing for selectorless templates. Here's an example showing most of the syntax where we create a MatButton component as a link, we apply the HasRipple directive without any inputs and set a tooltip that's only enabled if the user doesn't have permissions to go to the admin page:
<MatButton:a href="/admin" @HasRipple @Tooltip(message="Cannot navigate" [disabled]="hasPermissions")>Admin</MatButton:a>
Q&A Session
During the monthly Q&A, Jeremy Elbourn discussed the router when the topic of making RxJS optional in Angular came up.
He said a complete router rewrite isn’t planned, but down the line, the router’s current state might be exposed via a Signal.
Timestamp: 1:18:40
Zoneless in Developer Preview?
A pull request has arrived that could move zoneless out of the experimental phase it has occupied since Angular 18. There is a strong likelihood this change will be included in Angular 20.
feat(core): Move zoneless change detection to dev preview
#60748
This commit moves zoneless from experimental to developer preview.
- Update tag on provider API
- Remove "experimental" from provider name
- Move documentation from "experimental features" to "Best practices -> Performance" (at least temporarily until there is a better place)
Blocked by the following:
- [x] https://github.com/angular/angular-cli/pull/28405 / https://github.com/angular/angular/issues/58123
- [x] https://github.com/angular/angular/pull/58089
- [ ] https://github.com/angular/angular/issues/56240
- [ ] https://github.com/angular/angular/pull/60704
- [ ] https://github.com/angular/angular-cli/pull/30053
- [ ] Docs updates
Follow up work:
Nx Remote Caching
Nx, which serves as a substitute for the Angular CLI, offers a feature for a shared build cache. In practice, each completed build gets stored, and as long as the source code remains unchanged, future builds can pull their result straight from that cache.
The API that permits users to implement their own build-cache writer was previously under review for removal. That idea has been scrapped. Instead, a fresh API will arrive, letting us set up custom, self-managed caches without any cost.
httpResource at Angular Catch-Up
Alex Rickabaugh appeared as a guest on the Angular Catch-Up podcast, where the conversation centered on the newly introduced httpResource function.
As Alex pointed out, resource shouldn’t be mistaken for a state management solution; rather, it serves as an API for existing state management libraries, which can employ it to realize their own strategies for handling state.
Furthermore, Alex reminded listeners that httpResource loads eagerly, a departure from the lazy loading behavior seen with Observables.
https://www.podbean.com/ew/pb-4th8u-186896c
Fakes over Mocks
Wrapping up, Younes Jaaidi published an article on testing. In it, he advocates for a heavier reliance on fakes rather than mocks when creating test doubles, backing up his case with several rather revealing examples.
https://cookbook.marmicode.io/angular/fake-it-till-you-mock-it
ng-de Dates
The ng-de conference, which is held in Germany, has officially announced its schedule. The event runs from November 5th through the 7th, and the call for papers is now open as well.
