angular / angular/angular-cli

Transformation of static blocks breaks existing code

未關閉
#31,674 8 則留言 3 個 reaction 已指派 0 人 在 GitHub 檢視
area: @angular/build freq1: low needs: investigation severity5: regression type: bug/fix
主要語言
TypeScript
星號
27k
分支
11.8k
平均合併
14 小時 23 分鐘
30 天內合併 PR
162

描述

### Command

build

### Is this a regression?

- [x] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

It appears that when Angular compiles using a recent version of Babel's [plugin-transform-class-static-block](https://babeljs.io/docs/babel-plugin-transform-class-static-block), with the Webpack builder, the output is transformed in such a way it breaks existing code.

Angular code compiled and bundled with `@babel/plugin-transform-class-static-block@7.27.1`:
```ts
let CodeEditorWidget = class CodeEditorWidget extends _base_common_lifecycle_js__WEBPACK_IMPORTED_MODULE_5__.Disposable {
static #_ = CodeEditorWidget_1 = this;
static #_2 = this.dropIntoEditorDecorationOptions = _common_model_textModel_js__WEBPACK_IMPORTED_MODULE_27__.ModelDecorationOptions.register({
description: 'workbench-dnd-target',
className: 'dnd-target'
}); //#endregion
get isSimpleWidget() {
return this._configuration.isSimpleWidget;
}
get contextMenuId() {
return this._configuration.contextMenuId;
}
constructor(domElement, _options, codeEditorWidgetOptions, instantiationService, codeEditorService, commandService, contextKeyService, themeService, notificationService, accessibilityService, languageConfigurationService, languageFeaturesService) {
var _this;
super();
_this = this;

// Omitted for brevity
};
```

Angular code compiled and bundled with `@babel/plugin-transform-class-static-block@7.28.3`:
```ts
let CodeEditorWidget = (class CodeEditorWidget extends _base_common_lifecycle_js__WEBPACK_IMPORTED_MODULE_5__.Disposable {
//#endregion
get isSimpleWidget() {
return this._configuration.isSimpleWidget;
}
get contextMenuId() {
return this._configuration.contextMenuId;
}
constructor(domElement, _options, codeEditorWidgetOptions, instantiationService, codeEditorService, commandService, contextKeyService, themeService, notificationService, accessibilityService, languageConfigurationService, languageFeaturesService) {
var _this = this;
super();

// Omitted for brevity

static #_ = _staticBlock = () => (CodeEditorWidget_1 = this, this.dropIntoEditorDecorationOptions = _common_model_textModel_js__WEBPACK_IMPORTED_MODULE_27__.ModelDecorationOptions.register({
description: 'workbench-dnd-target',
className: 'dnd-target'
}), this);
}, _staticBlock());
```

The workaround, which you will also see explained in the attached reproducer, is to override the version of the Babel's plugin to 7.27.1.

I don't understand why, and under which circumstance, that plugin is injected into the compilation process.

### Minimal Reproduction

Steps to reproduce can be found on the reproducer's repository: https://github.com/lppedd/angular-monaco-repro

### Exception or Error

```text
ERROR ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
at new CodeEditorWidget (codeEditorWidget.js:69:252)
at new StandaloneCodeEditor (standaloneCodeEditor.js:69:9)
at new StandaloneEditor (standaloneCodeEditor.js:188:9)
at InstantiationService._createInstance (instantiationService.js:130:24)
at InstantiationService.createInstance (instantiationService.js:101:27)
at Object.create (standaloneEditor.js:43:33)
at App.ngAfterViewInit (app.ts:16:33)
at callHookInternal (debug_node.mjs:860:14)
at callHook (debug_node.mjs:887:13)
at callHooks (debug_node.mjs:841:17)
```

### Your Environment

```text
Angular CLI: 20.3.8
Node: 22.18.0
Package Manager: npm 11.6.2
OS: win32 x64

Angular: 20.3.9
... common, compiler, compiler-cli, core, forms
... platform-browser, router

Package Version
---------------------------------------
@angular-devkit/architect 0.2003.8
@angular-devkit/build-angular 20.3.8
@angular-devkit/core 20.3.8
@angular-devkit/schematics 20.3.8
@angular/build 20.3.8
@angular/cli 20.3.8
@schematics/angular 20.3.8
rxjs 7.8.2
typescript 5.9.3
zone.js 0.15.1
```

### Anything else relevant?

_No response_

貢獻指南

開啟貢獻指南

研究方向

從連結的 angular-monaco-repro 儲存庫開始,透過 Webpack builder 使用 @babel/plugin-transform-class-static-block 7.27.1 和 7.28.3 比較建置結果。追蹤該 plugin 進入 Angular CLI 建置的位置,然後確認使用目前 plugin 版本產生的 CodeEditorWidget 不再拋出回報的 super-constructor 錯誤。

由索引模型根據 Issue 內容生成。

評估

技術堆疊
angular, babel, typescript, webpack
領域
build-system, cli
Issue 類型
缺陷
難度
4/5
預估耗時
3-5 天
活躍度
冷清
描述清晰度
基本清楚
新手友好度
48/100

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。