angular / angular/angular-cli

Transformation of static blocks breaks existing code

Đang mở
#31,674 8 bình luận 3 reaction 0 người được giao Xem trên GitHub
area: @angular/build freq1: low needs: investigation severity5: regression type: bug/fix
Ngôn ngữ chính
TypeScript
Star
27k
Fork
11.8k
Merge trung bình
14 giờ 23 phút
Pull request đã merge (30 ngày)
162

Mô tả

### 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_

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với repository angular-monaco-repro được liên kết và so sánh các bản build bằng cách sử dụng @babel/plugin-transform-class-static-block 7.27.1 và 7.28.3 thông qua Webpack builder. Theo dõi nơi plugin đi vào bản build của Angular CLI, sau đó xác minh rằng CodeEditorWidget được tạo ra không còn phát sinh lỗi super-constructor đã được báo cáo với phiên bản plugin hiện tại.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, babel, typescript, webpack
Lĩnh vực
build-system, cli
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Ít trao đổi
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
48/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.