pure-toplevel-functions marks the IIFE Babel emits for self-referencing static fields as PURE → Injector.ɵprov dropped, NG0201 (webpack builder, targets below Chrome 94)
まだ誰も着手していません。
評価
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 初心者へのやさしさ
- 76/100
- issue の種類
- バグ
- 明瞭さ
- 明確に書かれている
- 活発さ
- 活発
- 技術スタック
- angular, babel, typescript
- 領域
- build-system, cli, tooling
調査の方向性
@angular-devkit/build-angular/src/tools/babel/presets/application.js と JavaScriptOptimizerPlugin から始め、次に chrome 80 の設定で repro.cjs を実行します。最適化された出力が Injector.ɵprov を保持し、webpack-builder の完全な再現が NG0201 なしで起動すれば完了です。
索引モデルが issue の本文から書いたものです。
説明
Command
build, 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
Same family as #29145 (Angular 19). #29250 fixed the _defineProperty(...) call shape, but the IIFE wrapper that Babel emits for self-referencing static fields is still annotated as pure.
Description
With the webpack builder (@angular-devkit/build-angular:browser), optimization: true / buildOptimizer: true and a browserslist that requires lowering class static blocks (any target below Chrome 94, e.g. chrome >= 80, Smart TV engines), the application fails at bootstrap with NG0201 because Injector.ɵprov (and __NG_ELEMENT_ID__) no longer exist on Injector from @angular/core.
Chain:
@babel/preset-envfor such targets lowers class fields (class-static-block lowering pulls intransform-class-properties). Static fields that reference their own class (static ɵprov = ɵɵdefineInjectable({ token: Injector, ... })) are emitted as a zero-argument IIFE:
For targets that only need private methods lowered (Chrome 84–93) the same code appears as a_Injector = Injector; (() => { _defineProperty(_Injector, "ɵprov", ɵɵdefineInjectable({ token: _Injector, ... })); _defineProperty(_Injector, "__NG_ELEMENT_ID__", -1); })();_staticBlock()helper call.pure-toplevel-functions(running in the non-safe mode used for@angular/*packages) skips IIFEs only when they have arguments (path.node.arguments.length !== 0) and does not know the_staticBlockhelper name, so the wrapper gets/*#__PURE__*/.- esbuild in
JavaScriptOptimizerPlugindrops the annotated, unused call.Injector.ɵprovis gone →NG0201at bootstrap.
#29250 added an exemption for direct _defineProperty(...) calls, which covers the non-self-referencing fields (THROW_IF_NOT_FOUND, NULL) but not the IIFE that Babel wraps around self-referencing ones.
Minimal Reproduction
Standalone script (run inside a project with @angular-devkit/build-angular installed; it uses the real application Babel preset with the options the webpack loader passes for @angular/* packages):
// repro.cjs
const { transformSync } = require('@babel/core');
const esbuild = require('esbuild');
const preset = require('@angular-devkit/build-angular/src/tools/babel/presets/application.js').default;
const src = `
export class Injector {
static THROW_IF_NOT_FOUND = THROW_IF_NOT_FOUND;
static NULL = new NullInjector();
static create(options, parent) { return createInjector(options, parent); }
static ɵprov = /* @__PURE__ */ ɵɵdefineInjectable({ token: Injector, providedIn: 'any', factory: () => ɵɵinject(INJECTOR) });
static __NG_ELEMENT_ID__ = -1;
}`;
const lowered = transformSync(src, {
configFile: false, babelrc: false, sourceType: 'module', compact: false,
filename: '/x/node_modules/@angular/core/fesm2022/core.mjs',
presets: [[preset, { supportedBrowsers: ['chrome 80'], forceAsyncTransformation: false, optimize: { topLevelSafeMode: false, wrapDecorators: true } }]],
}).code;
console.log(lowered);
const out = esbuild.transformSync(lowered, { treeShaking: true, format: 'esm', target: 'chrome80', charset: 'utf8' });
console.log(out.code);
console.log(/ɵprov/.test(out.code) ? 'OK: Injector.ɵprov kept' : 'BUG: Injector.ɵprov dropped');
Output after the preset (note the /*#__PURE__*/ on the IIFE):
_Injector = Injector;
_defineProperty(Injector, "THROW_IF_NOT_FOUND", THROW_IF_NOT_FOUND);
_defineProperty(Injector, "NULL", /*#__PURE__*/new NullInjector());
/*#__PURE__*/(() => {
_defineProperty(_Injector, "ɵprov", /* @__PURE__ */ɵɵdefineInjectable({ token: _Injector, providedIn: 'any', factory: () => ɵɵinject(INJECTOR) }));
_defineProperty(_Injector, "__NG_ELEMENT_ID__", -1);
})();
After esbuild the IIFE is gone: BUG: Injector.ɵprov dropped.
Full-app steps: ng new, switch to @angular-devkit/build-angular:browser, .browserslistrc = chrome >= 80, optimization: true, buildOptimizer: true, ng build, open the app → NG0201 at bootstrap.
Exception or Error
NG0201 at bootstrap: no provider for Injector (Injector.ɵprov was removed from the bundle); the app stays on the splash screen.
Your Environment
Angular CLI: 22.0.9 (@angular/build 22.0.9 nested under @angular-devkit/build-angular); the plugin source is unchanged in @angular/build 22.1.7
Angular: 22.1.0
@babel/core / @babel/preset-env: 7.29.7
esbuild: 0.19.9
Node: 22.23.1
OS: darwin
Anything else relevant?
A minimal fix that works for us (applied via patch-package): never annotate IIFEs regardless of argument count, and treat _staticBlock/_staticBlock2… as Babel helper names. Class wrappers that are safe to drop are already annotated by adjust-static-class-members, so tree-shaking is unaffected in practice (main bundle +0.06% in our legacy build).
function isBabelHelperName(name) {
- return babelHelpers.has(name);
+ return babelHelpers.has(name) || /^_staticBlock\d*$/.test(name);
}
...
const callee = path.get('callee');
- if ((callee.isFunctionExpression() || callee.isArrowFunctionExpression()) &&
- path.node.arguments.length !== 0) {
+ if (callee.isFunctionExpression() || callee.isArrowFunctionExpression()) {
return;
}
Since #33751 moved these plugins into @angular-devkit/build-angular, the fix would land there for 22.2. Happy to send a PR.
- 主要言語
- TypeScript
- スター
- 27k
- フォーク
- 11.8k
- 平均マージ
- 17時間 25分
- マージ済み PR(30日)
- 183
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
angular/angular-cli のほかの issue
-
area: @angular/build gemini-triaged
難易度 2/5 1〜3時間 初心者へのやさしさ 74/100
angular/angular-cli#33955 ·
-
area: @angular/cli gemini-triaged
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
angular/angular-cli#33055 · コメント 1 件 · リアクション 3 件 ·
-
angular/build:library area: @angular/build gemini-triaged
angular/angular-cli#34131 · 担当者 1 名 ·
-
angular/build:library area: @angular/build gemini-triaged
angular/angular-cli#34130 · 担当者 1 名 ·
-
angular/build:library area: @angular/build gemini-triaged
angular/angular-cli#34128 · 担当者 1 名 ·
angular/angular-cli の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
safetrustcr/dApp-SafeTrust#426 ·
-
area:workflow bug ready-for-agent
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
fil-donadoni/tolaria#4409 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
Fission-AI/OpenSpec#1960 ·
-
Add dependabot オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
corsairdev/corsair#1764 ·