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

Open
#27,611 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

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

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.

Description

area: @angular/build area: @ngtools/webpack freq1: low severity2: inconvenient type: bug/fix
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
// 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
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              <error>
@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

Dominant language
TypeScript
Stars
27k
Forks
11.8k
Avg merge
16h 35m
Merged PRs (30d)
176

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from angular/angular-cli

All issues in angular/angular-cli

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.