Detect missing imports in standalone components

[jnizet]

Which @angular/* package(s) are relevant/related to the feature request?

compiler

Description

If a directive has an attribute selector and the attribute is used without square brackets, such as routerLink="/users", and we forget to import the directive, or the module defining the directive, then the compiler doesn't complain at all, and we end up with an unnoticed bug.

When using NgModules, such a bug happens rarely, because you rarely forget to import the router module (for example) in your main or feature module. But when using standalone components, it's much more frequent, because the import needs to be repeated on every component that needs the directive, and of course we tend to only import what's absolutely needed.

After migrating two relatively small applications to standalone components, I've introduced such a bug, especially with routerLink, at least twice.

I understand why the compiler doesn't complain, but this, IMHO, is a source of hard to detect bugs: I doubt most people have integration tests checking that each and every link in their components works as expected. And even at runtime, the bug goes unnoticed until you click on the link and realize it doesn't work.

Proposed solution

It would be nice to be able to activate some compiler option that would, for example, check that any non-standard HTML attribute used in a component (such as routerLink) matches with a known directive selector for that component.

Or to be able to provide a list of selectors or attributes that must be checked.

Alternatives considered

I don't see any.

[pkozlowski-opensource]

Agreed! We are tracking it already in #46351.
Duplicate of #46351.

@jnizet would you mind adding your comment / description there?

[jnizet]

Sure @pkozlowski-opensource
Sorry for missing the duplicate.

[pkozlowski-opensource]

Thnx @jnizet . FYI we are very well aware of the issue and it really goes deeper than standalone as we essentially don't know, from the syntax alone, what is an intention of an "unknown" attribute. So the problem is real and as you've noted it is just more visible with standalone.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}