angular / angular/angular-cli

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

Offen
#27,611 5 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: @angular/build area: @ngtools/webpack freq1: low severity2: inconvenient type: bug/fix
Vorherrschende Sprache
TypeScript
Sterne
27k
Forks
11.8k
Ø Merge
14 Std. 23 Min.
Gemergte PRs (30 T.)
162

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne damit, packages/ngtools/webpack/src/transformers/replace_resources_spec.ts auszuführen und den zugehörigen replace_resources.ts-Transformer zu lesen. Verwende die fehlschlagende Reproduktion mit bedingtem templateUrl und vergleiche die erzeugte ESM- und CommonJS-Ausgabe. Fertig ist die Aufgabe, wenn beide Formen die bedingte Ressource korrekt transformieren und der Test erfolgreich ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript, webpack
Bereich
build-system, tooling
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Ruhig
Klarheit
Klar beschrieben
Anfängerfreundlichkeit
68/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.