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

Answer 1

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.