Upgrade to 11.2 breaks absolute paths in templateURLs

🐞 Bug report

Command (mark with an x)

  • new
  • build
  • serve
  • test
  • e2e
  • generate
  • add
  • update
  • lint
  • extract-i18n
  • run
  • config
  • help
  • version
  • doc

Is this a regression?

Yes, our previous version that works with absolute templateUrls was 11.0.6. I did not yet triage versions in between 11.2.2.

Description

Components with absolute templateUrl should be supported according to the docs https://angular.io/api/core/Component#templateUrl. In previous versions, they were resolved from the tsconfig root, such that the path would look something like /app/modules/..snip../component.html.

While updating our application to 11.2.2 from 11.0.6, the following issue occured:

The path is '/app/modules/common/tabs/scrollable-tabs/scrollable-tabs.component.html' and the path from the loading component is just prepended to it resulting in /Users/oliver/openproject/dev/frontend/src/app/modules/common/tabs/content-tabs/app/modules/common/tabs/scrollable-tabs/scrollable-tabs.component.html

(component source can be seen in https://github.com/opf/openproject/blob/dev/frontend/src/app/modules/common/tabs/content-tabs/content-tabs.component.ts#L51)

I tracked it down to these changes: https://github.com/angular/angular-cli/blob/master/packages/ngtools/webpack/src/ivy/host.ts#L43-L45 where the templateUrl path is simply joined to the component’s base path.

🔬 Minimal Reproduction

Simple steps to reproduce this bug.

git clone https://github.com/oliverguenther/angular-absolute-templateurl
npm install
ng build

Also feel free to check out our upstream repository

git clone https://github.com/opf/openproject --branch bump/angular11 --depth 1
cd frontend
npm install
npm run build

🔥 Exception or Error



Error: ./src/main.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Unable to locate component resource: /Users/oliver/openproject/dev/frontend/src/app/modules/common/tabs/content-tabs/app/modules/common/tabs/scrollable-tabs/scrollable-tabs.component.html
    at Object.resourceHost.readResource (/Users/oliver/openproject/dev/frontend/node_modules/@ngtools/webpack/src/ivy/host.js:18:23)
    at AdapterResourceLoader.preload (/Users/oliver/openproject/dev/frontend/node_modules/@angular/compiler-cli/src/ngtsc/resource/src/loader.js:88:39)
    at ComponentDecoratorHandler._preloadAndParseTemplate (/Users/oliver/openproject/dev/frontend/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/component.js:805:59)
    at ComponentDecoratorHandler.preanalyze (/Users/oliver/openproject/dev/frontend/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/component.js:118:58)
    at _loop_1 (/Users/oliver/openproject/dev/frontend/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:302:53)
    at TraitCompiler.analyzeClass (/Users/oliver/openproject/dev/frontend/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:324:35)
    at visit (/Users/oliver/openproject/dev/frontend/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:109:27)
    at visitNodes (/Users/oliver/openproject/dev/frontend/node_modules/typescript/lib/typescript.js:27037:30)
    at Object.forEachChild (/Users/oliver/openproject/dev/frontend/node_modules/typescript/lib/typescript.js:27275:24)
    at visit (/Users/oliver/openproject/dev/frontend/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:111:20)
    at TraitCompiler.analyze (/Users/oliver/openproject/dev/frontend/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:113:13)
    at TraitCompiler.analyzeAsync (/Users/oliver/openproject/dev/frontend/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:77:25)
    at _loop_1 (/Users/oliver/openproject/dev/frontend/node_modules/@angular/compiler-cli/src/ngtsc/core/src/compiler.js:394:88)
    at NgCompiler. (/Users/oliver/openproject/dev/frontend/node_modules/@angular/compiler-cli/src/ngtsc/core/src/compiler.js:410:37)
    at step (/Users/oliver/openproject/dev/frontend/node_modules/tslib/tslib.js:140:27)
    at Object.next (/Users/oliver/openproject/dev/frontend/node_modules/tslib/tslib.js:121:57

🌍 Your Environment




Angular CLI: 11.2.2
Node: 14.15.5
OS: darwin x64

Angular: 11.2.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.2
@angular-devkit/build-angular   0.1102.2
@angular-devkit/core            11.2.2
@angular-devkit/schematics      11.2.2
@angular/cdk                    11.2.2
@angular/cli                    11.2.2
@schematics/angular             11.2.2
@schematics/update              0.1102.2
rxjs                            6.6.6
typescript                      4.0.5

Anything else relevant?

1 possible answer(s) on “Upgrade to 11.2 breaks absolute paths in templateURLs

  1. Thanks for looking into this, this is very appreciated. 🙇 The number of “absolute”-style templateURLs in our project is limited since so I just rewrote all of these into relative in the meantime. Thanks for the pointer anyway, maybe it will be useful for someone else stumbling upon this issue.

    I’ll close this then.