angular / angular/angular-cli

Bug: [ngtools] Replace resource transformer issue with conditional `templateUrl`

Đang mở
#27,611 5 bình luận 0 reaction 0 người được giao Xem trên GitHub
area: @angular/build area: @ngtools/webpack freq1: low severity2: inconvenient 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

test

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

_No response_

### Description

When having conditional `templateUrl` like this
```
templateUrl:
true === true
? './dashboard.component.html'
: './dashboard.component.copy.html',
```

`replace_resources.ts` couldn't transform into proper codes (either `require` or `import`)

### Minimal Reproduction

- Run this test file https://github.com/ahnpnl/angular-cli/blob/bug/replace-resource/packages/ngtools/webpack/src/transformers/replace_resources_spec.ts
- Observe test failed
- Print out the output which would contain something like
```
// esm

//...
AppComponent = __decorate([
Component({
selector: 'app-root',
templateUrl: true === true
? './app.component.html'
: './app.component.copy.html',
styles: [__NG_CLI_RESOURCE__0, __NG_CLI_RESOURCE__1]
})
], AppComponent);
```

```
// commonjs

//...
exports.AppComponent = AppComponent = tslib_1.__decorate([
(0, core_1.Component)({
selector: 'app-root',
templateUrl: true === true
? './app.component.html'
: './app.component.copy.html',
styles: [require("./app.component.css?ngResource"), require("./app.component.2.css?ngResource")]
})
], AppComponent);
```

### Exception or Error

```text
Component 'AppComponent' is not resolved:
- templateUrl: ./app.component.html
Did you run and wait for 'resolveComponentResources()'?
```
```

### Your Environment

```text
Angular CLI: 17.3.6
Node: 20.12.2
Package Manager: yarn 1.22.17
OS: darwin x64

Angular: 18.0.0-rc.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... localize, material, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

Package Version
------------------------------------------------------
@angular-devkit/architect 0.0.0-EXPERIMENTAL-PLACEHOLDER
@angular-devkit/core 0.0.0-PLACEHOLDER
@angular-devkit/schematics 0.0.0-PLACEHOLDER
@angular/bazel 18.1.0-next.0+sha-1872fcd
@angular/build-tooling 0.0.0-e6e98d32d7d4d350ecf4ec10ad9c7e75198daabd
@angular/ng-dev
@schematics/angular 0.0.0-PLACEHOLDER
ng-packagr 18.0.0-rc.0
rxjs 7.8.1
typescript 5.4.5
webpack 5.91.0
zone.js 0.14.4
```

### Anything else relevant?

Related to this bug https://github.com/thymikee/jest-preset-angular/issues/1866

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

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

Hướng nghiên cứu

Bắt đầu bằng cách chạy packages/ngtools/webpack/src/transformers/replace_resources_spec.ts và đọc transformer replace_resources.ts liên quan. Sử dụng reproduction templateUrl có điều kiện đang bị lỗi và so sánh đầu ra ESM và CommonJS được phát ra. Hoàn thành khi cả hai dạng đều transform resource có điều kiện đúng cách và test chạy qua.

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, typescript, webpack
Lĩnh vực
build-system, tooling
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Ít trao đổi
Độ rõ ràng
Đặc tả rõ ràng
Mức phù hợp với người mới
68/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.