Libraries built with esbuild yield "ReferenceError: Cannot access '_c1' before initialization" about angular

[JoostK]

Ah, thanks, I see now. The problem originates here:

angular/packages/compiler-cli/linker/babel/src/es2015_linker_plugin.ts

Lines 132 to 143 in 160171e

	/**
	* Insert the `statements` at the top of the `program`, below any import statements.
	*/
	function insertIntoProgram(program: NodePath<t.Program>, statements: t.Statement[]): void {
	const body = program.get('body');
	const importStatements = body.filter((statement) => statement.isImportDeclaration());
	if (importStatements.length === 0) {
	program.unshiftContainer('body', statements);
	} else {
	importStatements[importStatements.length - 1].insertAfter(statements);
	}
	}

[bgotink]

@JoostK That patch fixes everything, thanks!

[JoostK]

This was the reason for the esbuild usage revert in ng-packagr, so I'd advise to update to not run into this problem. If esbuild is reintroduced into ng-packgr we'll look into why this happens and how it can be resolved.

[bgotink]

We're not using ng-packagr, we've got our own library builder, where we switched to esbuild earlier and we now have to revert because of this same issue.

[JoostK]

Could you please share (parts of) the library output that is consumed in the app?

[bgotink]

Dummy library passed through our pipeline: repro.zip

Here's the FESM file, where I added a comment showing where the constants are inserted

// dist/@something/redacted/esm2022/my-test.component.js
import { ChangeDetectionStrategy, Component } from "@angular/core";
import * as i0 from "@angular/core";
var MyTest = class _MyTest {
  static {
    this.\u0275fac = i0.\u0275\u0275ngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: _MyTest, deps: [], target: i0.\u0275\u0275FactoryTarget.Component });
  }
  static {
    this.\u0275cmp = i0.\u0275\u0275ngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: _MyTest, isStandalone: true, selector: "my-test", ngImport: i0, template: `
    <h1><ng-content select="[title]"></ng-content></h1>
    <ng-content></ng-content>
  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
  }
};
i0.\u0275\u0275ngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: MyTest, decorators: [{
  type: Component,
  args: [{
    standalone: true,
    selector: "my-test",
    template: `
    <h1><ng-content select="[title]"></ng-content></h1>
    <ng-content></ng-content>
  `,
    changeDetection: ChangeDetectionStrategy.OnPush
  }]
}] });

// dist/@something/redacted/esm2022/test.module.js
import { NgModule } from "@angular/core";
import * as i02 from "@angular/core";
// <<---- This is where the `const _cX` variables are inserted
var TestModule = class _TestModule {
  static {
    this.\u0275fac = i02.\u0275\u0275ngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i02, type: _TestModule, deps: [], target: i02.\u0275\u0275FactoryTarget.NgModule });
  }
  static {
    this.\u0275mod = i02.\u0275\u0275ngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.2", ngImport: i02, type: _TestModule, imports: [MyTest], exports: [MyTest] });
  }
  static {
    this.\u0275inj = i02.\u0275\u0275ngDeclareInjector({ minVersion: "12.0.0", version: "18.0.2", ngImport: i02, type: _TestModule });
  }
};
i02.\u0275\u0275ngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i02, type: TestModule, decorators: [{
  type: NgModule,
  args: [{
    imports: [MyTest],
    exports: [MyTest]
  }]
}] });
export {
  MyTest,
  TestModule
};

[JoostK]

@bgotink perhaps you could patch in #56431 locally to see if that resolves the issue you're having.