Angular Standalone library barrel files

[kreuzerk]

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

compiler

Is this a regression?

Yes

Description

When trying to migrate a module-based UI component library to standalone components, we want to support the following use case:

We have many modules that export multiple components. All those components must be imported into the consumer application for a UI feature to work. Let' say we have a TabModule. The TabModule looks something like this:

library

@NgModule({
  declarations: [TabGroupComponent, TabComponent],
  exports: [TabGroupComponent, TabComponent]
})
export class TabModule {}

In module land, a consumer of our library can simply import the TabModule and the Tab feature works. In standalone land the consumer has to import the TabGroupComponent and the TabComponent.

consumer

// Module land
import {TabModule} from '@my-org/lib';

@NgModule({
  imports: [TabModule]
})

// Standalone land
import {TabGroupComponent, TabComponent} from '@my-org/lib';

@Component({
  standalone: true,
  imports: [TabGroupComponent, TabComponent]
})

This works great, but for better developer experience, we would additionally want to offer the possibility to import all components at once. Therefore we can create a index.ts file where we export an array that contains the TabGroupComponent as well as the TabComponent.

library - index.ts

export const TabComponents = [
  TabGroupComponent, TabComponent
];

With this approach, the consumer could then simply import the TabComponents.

consumer

@Component({
  standalone: true,
  imports: [TabComponents]
})
export class MyComp {}

This works great in a multi-project workspace where we built our SPA from the library sources. But once we build our library for prod, package it and publish it on npm this approach no longer works.

We get the following compile error:

consumer

Error: src/app/standalone.component.ts:17:5 - error NG1010: 'imports' must be an array of components, directives, pipes, or NgModules.
  Value is a reference to 'TabComponents'.

17     TabComponents
       ~~~~~~~~~~~~~~~~~

  node_modules/lonely-lib/lib/index.d.ts:2:22
    2 export declare const TabComponents: any[];
                           ~~~~~~~~~~~~~~~~~
    Reference is declared here.


✖ Failed to compile.

We also had the case where we did not get this error but the build still failed because it was telling us that neither the TabGroupComponent nor the TabComponent were provided.

We also tried to import the TabGroupComponent and the TabComponent individually and locally create an array with them.

consumer

const components = [TabGroupComponent, TabComponent];

@Component({
  standalone: true,
  imports: [TabGroupComponent, TabComponent]
})
export class MyComponent {}

this one worked without errors.
We then also compared the array here with the array from our library by logging them in the constructor - and they are identical. Both are arrays containing the TabGroupComponent and the TabComponent. Therefore we believe it is a bug in the compiler.

Thx, a lot for your feedback and the great efforts to enable standalone components in Angular.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

Error: src/app/standalone.component.ts:17:5 - error NG1010: 'imports' must be an array of components, directives, pipes, or NgModules.
  Value is a reference to 'TabComponents'.

17     TabComponents
       ~~~~~~~~~~~~~~~~~

  node_modules/lonely-lib/lib/index.d.ts:2:22
    2 export declare const TabComponents: any[];
                           ~~~~~~~~~~~~~~~~~
    Reference is declared here.


✖ Failed to compile.

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

Angular CLI: 15.2.6
Node: 19.3.0 (Unsupported)
Package Manager: npm 9.2.0
OS: darwin arm64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1502.6
@angular-devkit/build-angular   15.2.6
@angular-devkit/core            15.2.6
@angular-devkit/schematics      15.2.6
@angular/cli                    15.2.6
@schematics/angular             15.2.6
rxjs                            7.8.0
typescript                      4.9.5

Anything else?

No response

[JoostK]

The compiler needs to know which components are available, which in the case of libraries requires that this is known by looking at the .d.ts artifacts of the library.

To make this work, the array must be declared as a tuple type using an as const cast, such that TypeScript emits the tuple type with the exact component types into the .d.ts file.

This is documented on angular.io in the standalone components guide.

[kreuzerk]

Thx @JoostK this works! Sorry for the issue. I missed this in the docs.

[kreuzerk]

Hi, @JoostK I have a small update. This morning I updated my library exports with the as const. This works great when importing my standalone components to consumers that also use standalone components. However, when I try to import the exported array in consumers modules I get the following error.

Error: src/app/foo/foo.module.ts:7:13 - error TS2322: Type 'readonly [typeof FooComponent, typeof BarComponent, typeof BazComponent]' is not assignable to type 'any[] | Type<any> | ModuleWithProviders<{}>'.
  The type 'readonly [typeof FooComponent, typeof BarComponent, typeof BazComponent]' is 'readonly' and cannot be assigned to the mutable type 'any[]'.

7   imports: [MY_COMPONENTS],
              ~~~~~~~~~~~~~~~~~

[pkozlowski-opensource]

@kreuzerk I believe that the issue you are facing now is a duplicate of #48089 - I've got a WIP PR #48106 to fix it - probably should dust it off...

[tomastrajan]

@pkozlowski-opensource thanks for the info, it would be very appreciated as that is something which really makes or breaks shipping component libs as pure standalone while preserving reasonable DX.

[kreuzerk]

@pkozlowski-opensource Yes, exactly. Thx, a lot for the info and the PR. Looking forward to the fix. 💪

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}