Angular 17 with esbuild and JIT compilation have obfuscated stacktraces

[dufrenb]

Command

serve

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

angular 17.x with latest webpack

Description

Since we update from webpack builder to esbuild, the error raced when a service is injected without being provided first does not show the service name. It's very annoying as it can be very painful to find out which service is missing in a very big application.

The stacktrace given with esbuild

The stacktrace given with webpack

Minimal Reproduction

Here is a minimal reproduction project https://github.com/padoa/angular_esbuild_example. You just have to serve the application using yarn serve or yarn serve:webpack and then click on one of the two buttons to see the error raced in the console.

Exception or Error

No response

Your Environment

~/angular_esbuild_example $> ng version

Angular CLI: 17.3.8
Node: 18.18.0
Package Manager: npm 9.8.1
OS: darwin arm64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.8
@angular-devkit/build-angular   17.3.8
@angular-devkit/core            17.3.8
@angular-devkit/schematics      17.3.8
@angular/cli                    17.3.8
@schematics/angular             17.3.8
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.7

Anything else relevant?

We found out that the following issue (angular/angular#55304) was incriminating the standalone API, so in the reproduction project we implemented both NgModule and Standalone but still the error is obfuscated.
Also, using AOT compilation instead of JIT in development resolves this issue. Is there any reason why JIT compilation with esbuild does not show the class name in stacktraces ?

[alan-agius4]

The issue arises because the Angular CLI, by default, supports Safari 16, which does not fully support static properties. Consequently, esbuild rewrites the static block from:

var NotProvidedService_1;
let NotProvidedService = class NotProvidedService {
  static #_ = NotProvidedService_1 = this;
  constructor() {
    console.log('NotInjectedService constructor', NotProvidedService_1.name);
  }
  static #_2 = this.ctorParameters = () => [];
};

to something like this:

var NotProvidedService_1;
var _a2;
var NotProvidedService = (_a2 = class {
    constructor() {
        console.log("NotInjectedService constructor", NotProvidedService_1.name);
    }
},
NotProvidedService_1 = _a2,
_a2.ctorParameters = () => [],
_a2);

This causes the name not to be printed in the stack traces. If you do not need to support Safari 16, you can exclude it by configuring the browserlist. For more information, see Angular CLI build documentation.

This works in webpack as webpack does not perform such transformations to ensure browser compatibility.

[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.}