Injection Tokens are not tree-shaken because the constructor is considered impure by esbuild

[eblocha]

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

If an injection token is defined as const TOKEN = new InjectionToken('desc'), then it will not be tree-shaken from the production bundle, because esbuild considers the constructor to have side-effects.

This means that if it uses a factory function, the items that factory function references are also included.

This can cause large services to be included from a library even if they are unused because they are the default implementation of a token.

This can be mitigated by marking the token definition with /* @__PURE__ */ like so:

const TOKEN = /* @__PURE__ */ new InjectionToken('desc')

I believe this is something that should be fixed in either @angular/core or @angular/build, by marking the InjectionToken constructor as pure: https://esbuild.github.io/api/#pure.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 19.2.16
Node: 24.1.0 (Unsupported)
Package Manager: npm 11.3.0
OS: darwin arm64

Angular: 19.2.15
... common, compiler, compiler-cli, core, elements, forms
... platform-browser, platform-browser-dynamic, router

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1902.16
@angular-devkit/core         19.2.16
@angular-devkit/schematics   19.2.16
@angular/build               19.2.16
@angular/cli                 19.2.16
@schematics/angular          19.2.16
ng-packagr                   19.2.2
rxjs                         7.8.1
typescript                   5.8.3
zone.js                      0.15.0

Anything else?

No response

[alan-agius4]

@angular/build includes logic to make these tree-shakable by adding the /* @__PURE__ */ comment. Could you provide a reproduction case where they are not being tree-shaken?

[eblocha]

I was able to reproduce it by setting up a new application with ng new, then changing main.ts to the following:

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { App } from './app/app';
import { InjectionToken } from '@angular/core';

const _TOKEN = new InjectionToken('retained');

bootstrapApplication(App, appConfig)
  .catch((err) => console.error(err));

After running ng build, the main chunk contains the token (I formatted the file):

If I add /* @__PURE__ */, then this token is not present.

I can try to create a repo after I finish work today.

[alan-agius4]

In this case this is working as intended. As we cannot assume that code written by developers is pure. Same thing if you had const foo = new Array();

Only code from @angular/ packages is annotated automatically.

[eblocha]

The application code is not the part that is considered for side-effects by esbuild, it's the InjectionToken constructor. Esbuild doesn't know whether new InjectionToken() has side effects, so it retains that code. Only the implementation of the constructor knows that for sure.

Exporting injection tokens is very common for libraries, so retaining them has an impact on the bundle size, especially when the tokens use a factory function which references large classes.