🐛 BUG: Wrangler + Angular SSR (prerender: false) + Private properties = `TypeError: Class constructor t cannot be invoked without 'new'`

[nunoarruda]

Which Cloudflare product(s) does this pertain to?

Pages

What version(s) of the tool(s) are you using?

2.14.2 [create-cloudflare]

What version of Node are you using?

20.11.1

What operating system and version are you using?

macOS Sonoma 14.4

Describe the Bug

Observed behavior

I noticed that:

1. When using the command npm create cloudflare@latest my-angular-app -- --framework=angular, an Angular SSR app is created with additional files and changes to make it work with Cloudflare Workers/Pages.
2. Static Site Generation (SSG) is enabled by default ("prerender": true on angular.json)
3. If you turn off SSG ("prerender": false), so everything is Server Side Rendered (SSR), and add a private property, things break.

Expected behavior

SSR should just work and not break with private properties.

Steps to reproduce

1. Create a Cloudflare version of an Angular app npm create cloudflare@latest my-angular-app -- --framework=angular
2. Turn off Static Site Generation (SSG) by setting "prerender": false on angular.json
3. Add a private property (like, for example, #test = 'test')
4. Run the app: npm run start and press b

cc: @petebacondarwin @alan-agius4 @JeanMeche

Please provide a link to a minimal reproduction

https://github.com/nunoarruda/my-angular-app

Please provide any relevant error logs

[wrangler:err] TypeError: Class constructor t cannot be invoked without 'new'
    at t.handleNavigationRequest (file:///Users/nunoarruda/Desktop/my-angular-app/.wrangler/tmp/pages-3oJJr3/chunk-ZK4POREG.mjs:2:47542)
    at t.scheduleNavigation (file:///Users/nunoarruda/Desktop/my-angular-app/.wrangler/tmp/pages-3oJJr3/chunk-ZK4POREG.mjs:2:63103)
    at t.navigateToSyncWithBrowser (file:///Users/nunoarruda/Desktop/my-angular-app/.wrangler/tmp/pages-3oJJr3/chunk-ZK4POREG.mjs:2:61042)
    at t.initialNavigation (file:///Users/nunoarruda/Desktop/my-angular-app/.wrangler/tmp/pages-3oJJr3/chunk-ZK4POREG.mjs:2:60522)
    at s (file:///Users/nunoarruda/Desktop/my-angular-app/.wrangler/tmp/pages-3oJJr3/chunk-ZK4POREG.mjs:2:64001)
    at null.<anonymous> (file:///Users/nunoarruda/Desktop/my-angular-app/.wrangler/tmp/pages-3oJJr3/chunk-ES3Z552B.mjs:34:29056)
    at [object Object]
    at e._loadComponent (file:///Users/nunoarruda/Desktop/my-angular-app/.wrangler/tmp/pages-3oJJr3/chunk-ES3Z552B.mjs:34:29045)
    at e.bootstrap (file:///Users/nunoarruda/Desktop/my-angular-app/.wrangler/tmp/pages-3oJJr3/chunk-ES3Z552B.mjs:34:28076)
    at null.<anonymous> (file:///Users/nunoarruda/Desktop/my-angular-app/.wrangler/tmp/pages-3oJJr3/chunk-ES3Z552B.mjs:34:35938)
[wrangler:inf] GET / 500 Internal Server Error

[alan-agius4]

The issue arises when re-running esbuild on an already bundled output, as it appears esbuild is incorrectly updating the references.

Angular CLI code:

  let M = class M {
    get hasRequestedNavigation() {
      return this.navigationId !== 0;
    }
    constructor() {
      //
    }
    complete() {
      this.transitions?.complete();
    }
    handleNavigationRequest(n) {
      let i = ++this.navigationId;
      this.transitions?.next(M(Object.assign(Object.assign({}, this.transitions.value), n), { id: i }));
    }

Wrangler Code:

  let t13 = class t {
    get hasRequestedNavigation() {
      return this.navigationId !== 0;
    }
    constructor() {
     //
    }
    complete() {
      this.transitions?.complete();
    }
    handleNavigationRequest(n) {
      let i = ++this.navigationId;
      this.transitions?.next(t(s(s({}, this.transitions.value), n), { id: i }));
    }

The problem lies in the handleNavigationRequest method, where the first parameter of this.transitions?.next is t(). However, in this context, t refers to the local class, whereas in the original code generated by Angular CLI, it's M, referencing a completely different function.

Certainly, resolving this issue would indeed require further investigation to determine the best course of action and probably provide a minimal reproduction to esbuild folks.

In this case, using a private field causes the problem because the private field is downleveled to a WeakMap which causes a change in the symbols names.

[alan-agius4]

Update: I managed to create a minimal reproduction and created an issue in the esbuild tracker.

[nunoarruda]

Decided to test this again using Angular 18 (although we already know this might be an esbuild issue). It still fails, but with different errors/logs now:

render SSR http://localhost:8788/
✘ [ERROR] ERROR W [Error]: NG05104

      at ms2.selectRootElement
  (file:///Users/nunoarruda/Desktop/my-angular-app/.wrangler/tmp/pages-gjkZeE/chunk-YRCGDSRU.mjs:35:26456)
      at nc.selectRootElement
  (file:///Users/nunoarruda/Desktop/my-angular-app/.wrangler/tmp/pages-gjkZeE/chunk-YRCGDSRU.mjs:35:91692)
      at fD
  (file:///Users/nunoarruda/Desktop/my-angular-app/.wrangler/tmp/pages-gjkZeE/chunk-YRCGDSRU.mjs:8:39107)
      at Qi2.create
  (file:///Users/nunoarruda/Desktop/my-angular-app/.wrangler/tmp/pages-gjkZeE/chunk-YRCGDSRU.mjs:34:10840)
      at e.bootstrap
  (file:///Users/nunoarruda/Desktop/my-angular-app/.wrangler/tmp/pages-gjkZeE/chunk-YRCGDSRU.mjs:34:31534)
      at null.<anonymous>
  (file:///Users/nunoarruda/Desktop/my-angular-app/.wrangler/tmp/pages-gjkZeE/chunk-YRCGDSRU.mjs:34:42335)
      at a.invoke
  (file:///Users/nunoarruda/Desktop/my-angular-app/.wrangler/tmp/pages-gjkZeE/polyfills.server.mjs:4:6639)
      at Object.onInvoke
  (file:///Users/nunoarruda/Desktop/my-angular-app/.wrangler/tmp/pages-gjkZeE/chunk-YRCGDSRU.mjs:34:7324)
      at a.invoke
  (file:///Users/nunoarruda/Desktop/my-angular-app/.wrangler/tmp/pages-gjkZeE/polyfills.server.mjs:4:6579)
      at p4.run
  (file:///Users/nunoarruda/Desktop/my-angular-app/.wrangler/tmp/pages-gjkZeE/polyfills.server.mjs:4:1965)
  {
    code: -5104
  }


[wrangler:err] Error: NG05104
    at ms2.selectRootElement (file:///Users/nunoarruda/Desktop/my-angular-app/.wrangler/tmp/pages-gjkZeE/chunk-YRCGDSRU.mjs:35:26456)
    at nc.selectRootElement (file:///Users/nunoarruda/Desktop/my-angular-app/.wrangler/tmp/pages-gjkZeE/chunk-YRCGDSRU.mjs:35:91692)
    at fD (file:///Users/nunoarruda/Desktop/my-angular-app/.wrangler/tmp/pages-gjkZeE/chunk-YRCGDSRU.mjs:8:39107)
    at Qi2.create (file:///Users/nunoarruda/Desktop/my-angular-app/.wrangler/tmp/pages-gjkZeE/chunk-YRCGDSRU.mjs:34:10840)
    at e.bootstrap (file:///Users/nunoarruda/Desktop/my-angular-app/.wrangler/tmp/pages-gjkZeE/chunk-YRCGDSRU.mjs:34:31534)
    at null.<anonymous> (file:///Users/nunoarruda/Desktop/my-angular-app/.wrangler/tmp/pages-gjkZeE/chunk-YRCGDSRU.mjs:34:42335)
    at a.invoke (file:///Users/nunoarruda/Desktop/my-angular-app/.wrangler/tmp/pages-gjkZeE/polyfills.server.mjs:4:6639)
    at Object.onInvoke (file:///Users/nunoarruda/Desktop/my-angular-app/.wrangler/tmp/pages-gjkZeE/chunk-YRCGDSRU.mjs:34:7324)
    at a.invoke (file:///Users/nunoarruda/Desktop/my-angular-app/.wrangler/tmp/pages-gjkZeE/polyfills.server.mjs:4:6579)
    at p4.run (file:///Users/nunoarruda/Desktop/my-angular-app/.wrangler/tmp/pages-gjkZeE/polyfills.server.mjs:4:1965)
[wrangler:inf] GET / 500 Internal Server Error (396ms)

Does anyone with influence at Cloudflare or esbuild know how to raise this issue with the right people?
This is blocking users from using Angular SSR ("prerender": false) on Cloudflare. Thanks in advance 👍

[petebacondarwin]

@nunoarruda - is this still an issue? There have been quite a few updates to both Angular and Cloudflare since August.

[nunoarruda]

@nunoarruda - is this still an issue? There have been quite a few updates to both Angular and Cloudflare since August.

@petebacondarwin I gave it a quick try, and it no longer appears to be an issue.