Ng-News 25/14: Selectorless PR

Selectorless aims to eliminate the need for selectors in templates by referencing components directly via class names. A first PR has been merged, which shows the initial direction Angular is taking toward this feature.

Selectorless

Standalone components were introduced in Angular 14. They removed the abstraction of NgModules, which had caused some trouble for the compiler.

To figure out a component’s dependencies, the compiler first had to find the NgModule, which was usually in another file.

Modern bundlers are built for single-file compilation, which makes parallel builds possible. A perfect setup is if a file includes everything it needs, like its dependencies.

On the path towards single-file compilation, another obstacle, namely the selector, will be removed.

A component’s template uses selectors to reference its dependencies. The corresponding classes are imported in the TypeScript file, but that's not enough. Just having the name of the class doesn't tell anything about its selector.

So in order to find out the selector of that dependency, the compiler needs to access the classes' filename and therefore break single-file compilation.

An example:

import { ComponentA } from './component-a';
import { ComponentB } from './component-b';

@Component({
  template: '<app-home />',
  imports: [ComponentA, ComponentB]
})
class App {}        

The compiler needs to know what class is behind the selector app-home. With the information in this file, it is not possible to tell if it is ComponentA or CompomentB. So the compiler needs to traverse the imports to find the right class.

The fix is simple. Why use a selector at all? Just reference the class directly in the template. That's the same thing we've been doing in TypeScript all the time.

import { ComponentA } from './component-a';
import { ComponentB } from './component-b';

@Component({
  template: '<ComponentA />'
})
class App {}        

Additionally, if it is clear what class is used in the template, it is also more straightforward for the runtime, which leads to better performance.

And this is exactly what selectorless is all about.

Selectorless is in a very early stage. Eventually, we will get an RFC with much more details.

Q&A Session

At the monthly Q&A session, Jeremy Elbourn briefly touched on the router in the context of making RxJS optional in Angular.

He mentioned that there won’t be a full rewrite of the router, but that the current router state might be exposed as a Signal in the future.

Time Position: 1:18:40

Zoneless in Developer Preview?

A PR landed, which will make zoneless leaving its experimental status, which it had since Angular 18. Chances are high, that this PR makes it into Angular 20.

Nx Remote Caching

Nx , an alternative to the Angular CLI, provides an option for a centralized build cache. That means, once a build is available, it is cached, and if the underlying code didn't change at all, subsequent builds can be served by the cache.

There have been some discussions about closing the API which allows writing the build cache on your own. That is now off the table. We will get a new API where we can write our self-hosted caches for free.

httpResource at Angular Catch-Up

Alex Rickabaugh was guest at the Angular Catch-Up podcast and talked about the new function httpResource.

Alex mentioned that resource is not already "state management" but an API for the existing state management libraries and they should use it to implement their approach to that problem.

He also mentioned that we have to remember that httpResource is eagerly loaded and not lazily like Observables.

Fakes over Mocks

Last but not least, there has also been an article by Younes Jaaidi about testing. He suggests to lean more towards fakes instead of mocks for test doubles and illustrated his argument with some quite eye-opening examples.

ng-de Dates

The German Angular conference, NG-DE Conference , has announced its dates. It is going to be on November 5th to 7th and the CFP has also opened.