Import components as array in Angular standalone components

Question

I created a library using standalone components. In this library, I export related components in arrays like this:

export const TABLE_COMPONENTS: Type<any>[] = [
  TableComponent,
  TableHeaderComponent,
  TableBodyRowDirective,
  TableHeaderRowDirective,
  TableBodyEmptyRowDirective,
  TableFooterRowDirective,
  TableFirstRowDirective,
  TableFilterIconDirective,
  TableLastRowDirective
];

But when I try to use this array in the consuming application it does not work. I tried like this:

imports: [
    TABLE_COMPONENTS
],

But I get the error "'imports' must be an array of components, directives, pipes, or NgModules. Value is a reference to 'TABLE_COMPONENTS'". I also tried:

Using the spread operator to "flatten" the array
Exporting components as Provider[] or any[]
Exporting components without specifying the type of the array

I even tried using the same syntax as in the official Angular guide

export const TABLE_COMPONENTS = [
  TableComponent,
  TableHeaderComponent,
  TableBodyRowDirective,
  TableHeaderRowDirective,
  TableBodyEmptyRowDirective,
  TableFooterRowDirective,
  TableFirstRowDirective,
  TableFilterIconDirective,
  TableLastRowDirective
] as const;

The weird thing with this syntax is that vscode does not complain, but then, I get the error above during the compilation.

Does anyone know how to export related components into an array in order to import them at once instead of one by one?

Updated:

One important thing I forgot to mention is that I have a playground application for this library that references it directly (so not via a npm link or by installing the package) and there, it works. The issue seems to appear when I consume the library from a different application where I install it.

Not really but I do need to import other components as well. so it would be something like imports: [ MyComponent, TABLE_COMPONENTS, MyOtherComponent ]. I tried with the spread operator but it does not work. I don't get it as at the end, this is simply an array of types... — ssougnez
– ssougnez, Commented Jan 11, 2023 at 20:33
Not in the case of standalone components ;-) The imports I'm showing here is one of a component. — ssougnez
– ssougnez, Commented Jan 11, 2023 at 21:12
Ups! did not pay attention that you are dealing with standalone components. — Mehyar Sawas
– Mehyar Sawas, Commented Jan 11, 2023 at 21:16
Could not reproduce your problem. Is that right how I did it? stackblitz.com/edit/angular-ivy-mt3alb?file=src/app/… — Mehyar Sawas
– Mehyar Sawas, Commented Jan 11, 2023 at 21:19

Cineris · Accepted Answer · 2023-01-11 21:41:38Z

1

The problem is that you're making a 2-dimensional array the way you have it set up.

export const TABLE_COMPONENTS: Type<any>[] = [
  TableComponent,
  TableHeaderComponent,
  TableBodyRowDirective,
  TableHeaderRowDirective,
  TableBodyEmptyRowDirective,
  TableFooterRowDirective,
  TableFirstRowDirective,
  TableFilterIconDirective,
  TableLastRowDirective
];


imports: [
    TABLE_COMPONENTS
],

After this, your imports will be an array with 1 element, which is itself an array. If you use the spread operator, it should work as you intend:

imports: [
    ...TABLE_COMPONENTS
]

You may also need to remove the Type<any>[] typing from the TABLE_COMPONENTS to coerce it

Here's a working StackBlitz example showing it working as expected with no typing, and using the spread operator: StackBlitz Example

edited Jan 11, 2023 at 21:41

answered Jan 11, 2023 at 21:31

Cineris

5811 gold badge5 silver badges15 bronze badges

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

2 Comments

ssougnez Over a year ago

I'll try that tomorrow but as said in the OP, I think I already did that and it didn't work. CHeck out the OP, I wrote an update.

Rob Over a year ago

I'm getting an error related to Angular being unable to statically analyze the array,

'imports' must be an array of components, directives, pipes, or NgModules.   Value is of type '[ (not statically analyzable), (not statically analyzable), (not statically analyzable), RouterModule, SharedModule, ReactiveFormsModule, ButtonDirective, SearchFieldComponent, IconComponent]

Jeremy Caney · Accepted Answer · 2024-12-30 01:42:20Z

0

What works for me was not making a 2-dimensional array, but directly put in each component "imports" the dependencies as array:

@Component({
......
imports:[TableComponent,TableHeaderComponent,TableBodyRowDirective,...etc]

edited Dec 30, 2024 at 1:42

Jeremy Caney

7,808115 gold badges58 silver badges86 bronze badges

answered Dec 29, 2024 at 21:45

adem1414

111 bronze badge

Collectives™ on Stack Overflow

Import components as array in Angular standalone components

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related