angular / angular/angular-cli

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

Open
#27,611 5 comments 0 reactions 0 assignees View on GitHub
area: @angular/build area: @ngtools/webpack freq1: low severity2: inconvenient type: bug/fix
Dominant language
TypeScript
Stars
27k
Forks
11.8k
Avg merge
14h 23m
Merged PRs (30d)
162

Description

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

Contributor guide

Open the contributing guide

Research direction

Start by running packages/ngtools/webpack/src/transformers/replace_resources_spec.ts and reading the related replace_resources.ts transformer. Use the failing conditional templateUrl reproduction and compare the emitted ESM and CommonJS output. Done means both forms transform the conditional resource correctly and the test passes.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript, webpack
Domain
build-system, tooling
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.