0

I'd like to migrate my project to use standalone component.

But I'm using quite a lot of "Barrel imports" What's a barrel?

So, I just

  1. added the following to my component
@Component({
  standalone: true,
  // ...
})
export class SharedComponent { 
 //... 
}
  1. Removed the shared-component.module.ts file
  2. Replace the "export" section in my barrel module
// shared.module.ts
@NgModule({
  exports: [
    // Shared
    SharedFormsModule,

    // Modals
    SharedComponent, // <-- Error (1)
    // ...

I do get the following error

Error (1)

Can't be exported from this NgModule, as it must be imported first

So tried to declare it first

// shared.module.ts
@NgModule({
  declarations: [ModalDeleteArchiveComponent], // <-- Error (2)
  exports: [
    // Shared
    SharedFormsModule,

    // Modals
    SharedComponent, // <-- Error (1)
    // ...

But now I do get

Error (2)

Component ModalDeleteArchiveComponent is standalone, and cannot be declared in an NgModule. Did you mean to import it instead?

Somebody knows how to make this work?

Raphaël Balet
  • 6,334
  • 6
  • 41
  • 78

1 Answers1

4

standalone components should be listed in imports, not in declarations.

// shared.module.ts
@NgModule({
  declarations: [ModalDeleteArchiveComponent], // <-- Wrong
  imports: [ModalDeleteArchiveComponent], // <-- Correct
  exports: [
    // Shared
    SharedFormsModule,

    // Modals
    SharedComponent,
    // ...
  ]
Raphaël Balet
  • 6,334
  • 6
  • 41
  • 78
Andrei
  • 10,117
  • 13
  • 21
  • This is the correct answer, since standalone components are modules under the hood. (Virtual Modules, more: https://www.reddit.com/r/Angular2/comments/xnyumv/how_are_standalone_components_implemented_under/) – Don Apr 18 '23 at 14:08
  • Thx, but I really have to export them, because I wish to keep the barrel module logic. Or how can this being then used in the `third.module.ts`. I've updated my question to add an explanation of what a barrel module is. @Don FYI – Raphaël Balet Apr 18 '23 at 14:38
  • You can still simply export them inside your barrel-module. Just be sure at the same time to not have them inside the declarations array, but inside the import array of your barrel-module. – Don Apr 18 '23 at 14:41