Application builder doesn't tree shake non top-level variables

[JeanMeche]

Command

build

Description

While investigating prod builds I did notice, in some cases tree shaking is less efficient when using esbuild.

For example here:

https://github.com/angular/angular/blob/d315e2c4fa178dfbd41bc25259605bb999fa302e/packages/core/src/render3/errors_di.ts#L54-L57

/** Throws an error when a token is not found in DI. */
export function throwProviderNotFoundError(token: any, injectorName?: string): never {
  const injectorDetails = injectorName ? ` in ${injectorName}` : '';
  throw new RuntimeError(
      RuntimeErrorCode.PROVIDER_NOT_FOUND,
      ngDevMode && `No provider for ${stringifyForError(token)} found${injectorDetails}`);
}

The injectorDetails const remains in the final bundle while being unused.
This issue does not occur when using the webpack/terser.

I believe this is related to evanw/esbuild#639.

Minimal Reproduction

• ng new foobar
• NG_BUILD_DEBUG_OPTIMIZE=1 yarn build
• notice throwProviderNotFoundError isn't removed by tree-shaking when using esbuild.

Exception or Error

No response

Your Environment

Angular CLI: 17.0.8
Node: 18.17.0
Package Manager: npm 9.6.7
OS: darwin x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.8
@angular-devkit/build-angular   17.0.8
@angular-devkit/core            17.0.8
@angular-devkit/schematics      17.0.8
@schematics/angular             17.0.8
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

Anything else relevant?

cc @AndrewKushnir

[alan-agius4]

@JeanMeche, indeed this is related to evanw/esbuild#639. This is not really actionable from our end since this is by esbuild design.

The method however, can be updated to make it possible for the unused variable to be dropped when ngDevMode is not truthy.

export function throwProviderNotFoundError(token: any, injectorName?: string): never {
  if (ngDevMode) {
    const injectorDetails = injectorName ? ` in ${injectorName}` : '';
    throw new RuntimeError(
        RuntimeErrorCode.PROVIDER_NOT_FOUND,
        `No provider for ${stringifyForError(token)} found${injectorDetails}`);
  } else {
    throw new RuntimeError(RuntimeErrorCode.PROVIDER_NOT_FOUND);
  }
}

Which will result in the below, when ngDevMode is falsy:

export function throwProviderNotFoundError(r,o){
  throw new RuntimeError(RuntimeErrorCode.PROVIDER_NOT_FOUND);
}

[JeanMeche]

Thx, this is what I afraid of.

I have already a PR for this one but more generally this means that we'll need to evolve our coding practices.

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