How to implement combined export in Angular Standalone Components

Question

When using angular standalone components(v16), how to implement exports similar to @NgModule, which can combine import/export components?

Just like the NzMenu component in ng-zorro-antd.Use multiple components to complete a function. ng-zorro-antd.

@NgModule({
  imports: [BidiModule, CommonModule, PlatformModule, OverlayModule, NzIconModule, NzNoAnimationModule, NzOutletModule],
  declarations: [
    NzMenuDirective,
    NzMenuItemComponent,
    NzSubMenuComponent,
    NzMenuDividerDirective,
    NzMenuGroupComponent,
    NzSubMenuTitleComponent,
    NzSubmenuInlineChildComponent,
    NzSubmenuNoneInlineChildComponent
  ],
  exports: [NzMenuDirective, NzMenuItemComponent, NzSubMenuComponent, NzMenuDividerDirective, NzMenuGroupComponent]
})
export class NzMenuModule {}

Angular officially only describes how to combine imports in ngModule Standalone components for library authors.

Such an array could be imported by applications using NgModules and added to the @NgModule.imports.

I would like to ask how to achieve the same effect without using ngModule?

export MY_MENU_COMPONENTS = [MyFirstComponent, MySecondComponent,....] — Andrei
– Andrei, Commented Oct 23, 2023 at 8:00
I have tried this method, it is only valid when imported in ngModule, but it is invalid in stabdalone components, and an error will be reported at runtime: Unable to import component. — ZheXian
– ZheXian, Commented Oct 23, 2023 at 9:00
it should work. @Component({..., imports: [...MY_MENU_COMPONENTS, OtherComponent]}) — Andrei
– Andrei, Commented Oct 23, 2023 at 10:17
I have also tried this method, but it does not take effect in Component and an error is still reported at runtime. The current method is to merge and export standalone components through NgModule. I want to know if it is possible to achieve merged export without using NgModule. — ZheXian
– ZheXian, Commented Oct 23, 2023 at 16:44

Tortila · Accepted Answer · 2023-11-08 23:13:30Z

0

Each component and directive must be either a standalone or declared in a module.

Components and directives can be exported directly only if they are standalone. In your example ng-zorro components and directives are not standalone. Thus they cannot be exported using export const NZ_MENU = [NzMenuDirective, NzMenuItemComponent, ...] as const;, only via module.

If you want to export component or directive via module, in this module you should:

import and export component/directive if it's standalone
declare and export component/directive if it's not standalone

answered Nov 8, 2023 at 23:13

Tortila

6884 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to implement combined export in Angular Standalone Components

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related