Angular Library Exporting Standalone Components

Question

I created an Angular library with a standalone component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-form-error',
  standalone: true,
  imports: [],
  template: `
  <ng-container>
    Hello, World!
  </ng-container>
  `,
})
export class FormErrorComponent {

}

I am exporting it on the public-apis.ts

export * from './lib/form-error.component';

Then I import it in another project into my Standalone component:

import { FormErrorComponent } from 'myLib/projects/form-error/src/public-api';
@Component({
  selector: 'app-dynamic-form',
  standalone: true,
  imports: [,
    FormErrorComponent
  ],

and in my template:

<app-form-error></app-form-error>

I am always getting this error:

[ERROR] Transforming JavaScript decorators to the configured target environment ("chrome123.0", "edge122.0", "firefox115.0", "ios16.0", "safari16.0" + 7 overrides) is not supported yet node_modules/myLib/projects/form-error/src/lib/form-error.component.ts:3:0: 3 │ @Component({

When I do the same with a service it works perfectly fine, but not with a Standalone component.

Here is the error on Stackblitz

It is already on ES2022 - the same as the app I am using. But I am getting the same error for "esnext" — Stef
– Stef, Commented May 19, 2024 at 12:16
You have the component in the declaration part of the module and set it to standalone. Are you sure this is working? — Thomas Renger
– Thomas Renger, Commented May 19, 2024 at 13:41
Absolutely not. But I thought this is how one would export a Standalone component. I am doing the exact same with a service and it is working - so I thought I'd give it a shot as I want to avoid wrapping it up in an NgModule — Stef
– Stef, Commented May 19, 2024 at 14:30
You can import a standalone into a module and you can export it from a module (if you import it), but there is no need to export the component from the lib. The usage of a module for the stand alone component is only for bundling to give the developer the chance to import the module instead of each single component of the bundle. But the language service / compile should give you an error if you configure a declaration for the stand alone component. — Thomas Renger
– Thomas Renger, Commented May 19, 2024 at 19:08

int lawl is over 9000 · Accepted Answer · 2024-05-22 07:47:14Z

Unfortunately I can't provide a fix for the issue, but I can share a workaround.

The issue seems to stem from esbuild not being configured correctly in a multi-project repository, I am unsure whether this is an Angular issue or an esbuild issue.

To work around the problem you have to use the old webpack builder in angular.json.

This should be similar to your current config:

{
  "my-library": {
    "projectType": "application",
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:application",
        "options": {
          "browser": "projects/my-library/src/main.ts",
          [...]
        },
        "configurations": [...]
      },
      "serve": [...]
    }
  }
}

You have to change builder from "application" (or "browser-esbuild") to "browser":

"builder": "@angular-devkit/build-angular:browser",

and rename the "browser" field to "main":

"main": "projects/my-library/src/main.ts",

Now you should be able to build or serve the application.

Collectives™ on Stack Overflow

Angular Library Exporting Standalone Components

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related