Exported array of standalone components cannot be imported

[GuillaumeNury]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

No

Description

I have a library that export multiple component in a const as advised in the standalone guide:

const LU_SIMPLE_SELECT_COMPONENTS = [
  LuSimpleSelectInputComponent,
  LuOptionDirective,
  LuDisplayerDirective,
  LuOptionComponent,
] as const;

Whenever I import this constant from a module or in a component in an application that use my library, I have the following issue:

Value at position 0 in the NgModule.imports of AppModule is not a reference
Value could not be determined statically.

If I redefined the same const in the application, it works.

Links

• The library part
• A Stackblitz that reproduce the issue (uncomment line 24 and comment line 23 to make it works)

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-ivy-5rgxzc?file=src%2Fapp%2Fapp.module.ts

Please provide the exception or error you saw

> Value at position 0 in the NgModule.imports of AppModule is not a reference
> Value could not be determined statically.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 14.1.3        
Node: 16.14.2
Package Manager: npm 8.5.0
OS: win32 x64

Angular: 14.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1401.3
@angular-devkit/build-angular   14.1.3
@angular-devkit/core            14.1.3
@angular-devkit/schematics      14.1.3
@angular/cdk                    14.2.7
@schematics/angular             14.1.3
rxjs                            7.5.7
typescript                      4.7.4

Anything else?

Love Standalone components!

[montella1507]

I have another problem with exported array of standalone components and directives...

When i import to the module one by one:

imports: [DirectiveA., DirectiveB, DirectiveC]

both server and prod build works.
However, when i import exported directives array:

export const DIS = [DirectiveA, DirectiveB, DirectiveC];
imports: [DIS]  // i tried ...DIS too

SERVER works, but prod builds is broken - somehow it brakes imports at all.. and it cannot even find things from other imported modules.

Unfortunately.. i am not able to simulate it minimal repo :-/

Any idea what to try? What may be the cause?

Directives are in Buildable library in NX Monorepo

Probably this may be the issue:

ng-packagr/ng-packagr#2398

[montella1507]

@AndrewKushnir maybe it solves this too
ng-packagr/ng-packagr#2398 ?

[AndrewKushnir]

@JoostK what do you think about closing ng-packagr/ng-packagr#2398?

[JoostK]

Thanks for the reminder, that was on the back of my mind :-)

[hakimio]

@AndrewKushnir
This should not be closed until PR #48106 is merged. At this point even when using Angular v15.1, readonly array of standalone components can not be imported.

[cvandradg]

If I understood ur idea, U want to use components like this:

  standalone: true,
  imports: [
    CommonModule,
    RouterModule,
    COMPONENTS,
    MODULES,
  ],
  providers: [LoginStore],

and avoid "Unable to import component ComponentNameHere."

I solved it via:

export const COMPONENTS = [
  PrimaryAnimatedButtonComponent,
  TertiaryAnimatedButtonComponent,
  SecondaryAnimatedButtonComponent,
] ;

export * from '../components/primary-animated-button/primary-animated-button.component';
export * from '../components/tertiary-animated-button/tertiary-animated-button.component';
export * from '../components/secondary-animated-button/secondary-animated-button.component';

[hakimio]

@cvandradg No, the issue reported here is that a readonly array of standalone components can not be imported in NgModule.
The Angular team recommended "best practice" described in the docs does not work.

[montella1507]

@cvandradg No, the issue reported here is that a readonly array of standalone components can not be imported in NgModule. The Angular team recommended "best practice" described in the docs does not work.

Angular renaissance and momentum.

[cvandradg]

@hakimio thank you, so the current suggested way of angular to export components, like this:

 export const COMPONENTS = [
  PrimaryAnimatedButtonComponent,
  SecondaryAnimatedButtonComponent,
  TertiaryAnimatedButtonComponent,
] as const;

is currently not working, i got it right? (cuz It's not working for me unless I export them, I'm on Angular17)

[richardsengers]

This is quite annoying, I'm refactoring our shared library for standalone components, just to find out the docs are lying :-(

The PR is a year old

[hakimio]

#52615 (comment)
@pkozlowski-opensource

[richardsengers]

Ah thnx...missed that one

[greg-md]

Still not resolved? :(

[greg-md]

Seems like the solution provided by @cvandradg is working. If I re-export shared components, then the error is not happening. Ex:

import { MillifyPipe } from "./millify/millify.pipe";

export const SHARED_APP_COMPONENTS = [
  MillifyPipe,
] as const;

export { MillifyPipe } from "./millify/millify.pipe";

[hakimio]

It doesn't work with NgModule. It only works with standalone components.

[greg-md]

@hakimio for ng modules I think you can create a shared module to import instead.

[hakimio]

This issue is about libraries.
Relying on modules to export standalone components is just a short-term workaround, not a proper solution for library authors.

[michaelfaith]

@greg-md just to clarify, I think @hakimio is saying that an app that uses NgModules isn't able to import a read only array of components (like from a library). It would be taking a step backwards for that library to have to export a shared module, when their aim is going fully standalone.

[richardsengers]

exactly, it doesn't make sence to create an NgModule just to import multiple components. We want to get rit of the NgModules from the libraries, that is the whole point in the first place :-)

[iamenrique]

No official workaround for this problem yet and docs are still the same in v17.3.2.

I'm also porting libraries to the standalone approach, and I'm doing the following to chill out these errors:

/*
 * THIS IS MY LIBRARY public-api.ts FILE
 * Public API Surface of A Library
 */

export {AComponent} from './lib/a/a.component';

import {AComponent} from './lib/a/a.component';
export const NGX_A_LIBRARY_COMPONENTS = [AComponent] as const; // <-- This is NG docs recommendation


/*
 * THIS BELONGS TO THE HOST APP USING THE LIBRARY
 * App Module 
 */
import {NGX_A_LIBRARY_COMPONENTS, AComponent} from '@company/a-library';

@NgModule({
    declarations: [...],
    imports: [
        ...
        NGX_A_LIBRARY_COMPONENTS as [typeof AComponent], // <-- This might do the trick
    ]
})
export class AppModule {
}

Perhaps not ideal but worth the try.