How can I use a standalone custom directive within a non-standalone component in Angular?

Question

Using a standalone custom directive in a NOT standalone component

I created a custom structural directive and I want to be able to reuse it in different componentsa. Everything works fine when it's not standalone, but when I add standalone: true it's giving me an error: 'imports' is only valid on a component that is standalone. I don't want to make my component standalone as well, only the directive.

Is there a way to achieve that?

Answer 1

You can import standalone directives into your modules in the same way you would import a module: https://angular.io/guide/standalone-components#using-standalone-components-in-ngmodule-based-applications

Answer 2

If you have a non-standalone component, and when you want to use a standalone custom directives on it, you have to import the directives into the module file, i.e. app.module.ts.

Remember to only import, not declare your custom directives if they are standalone.

The imports property in a @Component decorator only applies for standalone component. If your component is not standalone and you try to add something to the imports property, it will throw an error.