bug(all): directives are not standalone

[ghost]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

As the standalone APIs have become stable in v15, I expected @angular/material directives to be declared as standalone, but it did not happen for some reason?

Reproduction

import { MatTooltip } from '@angular/material/tooltip';

@Directive({
  selector: '[appCustomTooltip]',
  hostDirectives: [MatTooltip],
})
export class CustomTooltipDirective {}

Expected Behavior

MatTooltip and MatLegacyTooltip should be standalone directives

Actual Behavior

Error: NG0308: Host directive MatTooltip must be standalone.

Environment

Angular CLI: 15.0.0
Node: 18.12.0
Package Manager: npm 9.1.1
OS: win32 x64

Angular: 15.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1500.0
@angular-devkit/build-angular   15.0.0
@angular-devkit/core            15.0.0
@angular-devkit/schematics      15.0.0
@schematics/angular             15.0.0
rxjs                            7.5.7
typescript                      4.8.4

[maartentibau]

It's a work in progress I think.
At this moment only CdkMenu and the sub-elements are standalone from what I can make of the source code.

Maybe it might be an idea to clearly state in the docs which components are already standalone and which ain't.

[terameta]

I agree with @maartentibau about a list and hopefully a roadmap for the standalone directives.
Currently I am also having the same issue with CDK Overlay, which will probably open many possibilities for most of the developers who are consuming CDK components/directives.

[wagnermaciel]

Hi, this is something that's on our radar but we still haven't been able to fully plan out. It's definitely something on the horizon, though

[michaelfaith]

@wagnermaciel if you're inviting external contributions for the standalone migration work, I'd be up for helping with it.

[andrewseguin]

Hey @michaelfaith - this work is pending some team discussion about our strategy for providing components that have a lot of dependencies. Previously, these would all be bundled in the NgModule, but as standalone we need to decide how users should consume them.

This is something we want to do, but likely after v17

[hakimio]

If you would fix angular/angular#48089, you could just export read-only array like the documentation suggests.

[meriturva]

What I'm expecting is to use a few directives (cdkTrapFocus) has composition: https://angular.io/guide/directive-composition-api#adding-directives-to-a-component

I advise starting with the incremental adoption of "standalone" only for cdk directives with few dependencies (the same approach we are taking here on our private component library).

My two cents.

[hakimio]

If you are unable/unwilling to merge angular/angular#48106 for whatever reason (some fragile internal tests failing nobody wants to touch?) then the only other option is to use NgModule:

const COMPONENTS = [MyStandaloneDirective, MyStandaloneComponent];

@NgModule({
    imports: COMPONENTS,
    exports: COMPONENTS
})
export class StandaloneComponentModule {}

[meriturva]

Ok @hakimio but the main issue here is:

https://angular.io/guide/directive-composition-api#adding-directives-to-a-component

Specially:

Directives used in hostDirectives must be standalone: true.

[hakimio]

Yes, I know that you can't use non-standalone directives as host-directives, my comment was meant for @andrewseguin

[michaelfaith]

Hey @michaelfaith - this work is pending some team discussion about our strategy for providing components that have a lot of dependencies. Previously, these would all be bundled in the NgModule, but as standalone we need to decide how users should consume them.

This is something we want to do, but likely after v17

@andrewseguin Sounds good. At the point where you're ready to move on it, if you're inviting contributions, I'd be up for helping.

[flensrocker]

MatSuffix is something I want to use as host directive and stumbled upon this issue...

Without this, every user of my reusable suffix component has to remember to put that on the element. Not that bad but it would be nice to "DRY" that out...

[liesahead]

CdkMonitorElementFocus also can't be used that way, sadly.

[roma2341]

Please answer me why custom standalone directives can't import modules ? I need to show MyModalComponent. But it has it's own MyModalModule where I import material components. If I try to show MyModalComponent from my directive as it is it will throw me a bunch of errors e.g mat-icon is not defined, because my directive doesn't know anything about MyModalModule... i don't understand this, angular team just make feature and don't describe how should we use their standalone directives without ability to import things we need. When I asked this question here my ticked was closed after 15 minutes, I tried to reproduce my issue, but due to peculiarities of angular providers angular team considered that I'm an idiot who makes simple errors and didn't help me
I'm using hostDirectives to reduce code duplicity so I can't use old modules where I could import what I need because of error: Directives used in hostDirectives must be standalone: true.

[michaelfaith]

If MyModalComponent isn't standalone too, then you should be importing MyModalModule into your directive's imports, rather than MyModalComponent.

[roma2341]

If MyModalComponent isn't standalone too, then you should be importing MyModalModule into your directive's imports, rather than MyModalComponent.

The problem is that Directives doesn't have imports. I understand that If i want to show standalone component it's ok, but if my component is not standalone i wouldn't be able to show it in modal from my Directive. because i need to import module with it somewhere, or i will have to import MyModalModule in every component that defined hostDirectives with my directive, which shows my modal

[michaelfaith]

Right, sorry. Brain hasn't gotten up to full speed yet.

[JeanMeche]

CDK & Material were ported to standalone by #28155.