components: bug(all): directives are not standalone
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
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 27
- Comments: 18 (5 by maintainers)
It’s a work in progress I think. At this moment only
CdkMenuand the sub-elements arestandalonefrom what I can make of the source code.Maybe it might be an idea to clearly state in the docs which components are already
standaloneand which ain’t.CDK & Material were ported to standalone by #28155.
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
Right, sorry. Brain hasn’t gotten up to full speed yet.
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
Yes, I know that you can’t use non-standalone directives as host-directives, my comment was meant for @andrewseguin
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.