angular: Exported array of standalone components cannot be imported

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

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!

About this issue

  • Original URL
  • State: open
  • Created 2 years ago
  • Reactions: 10
  • Comments: 20 (2 by maintainers)

Commits related to this issue

Most upvoted comments

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 😃

@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.

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

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';

Ah thnx…missed that one

@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.

@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.

Thanks for the reminder, that was on the back of my mind 😃