Upgrade to 11.2 breaks absolute paths in templateURLs

[oliverguenther]

🐞 Bug report

Command (mark with an x)

• [ ] new
• [x] build
• [x] 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?

[alan-agius4]

I had a chat with @clydin who mentioned a couple of good points.

• templateUrl, the documentation states that it can be a relative path OR an absolute URL. Note: that absolute URLs are not supported in AOT mode.
• While we can try to resolve templateUrl and styleUrls, similar to TypeScript modules, the compiler will not be able to resolve absolute paths like the one used in the above example /app/modules/common/tabs/scrollable-tabs/scrollable-tabs.component.html, as absolute paths are not resolved relative to the baseUrl, only non-relative imports are. https://www.typescriptlang.org/docs/handbook/module-resolution.html#relative-vs-non-relative-module-imports

Therefore, while unfortunate for yourself, it does appear that in 11.2.0 we addressed an unknown bug of incorrectly resolving absolute templates from baseUrl. Hence, I believe that with the recent changes we are now more "correct" in resolving the templates and also align with the supported path as per documentation.

[oliverguenther]

Thanks @alan-agius4 for the clarification. That is understandable yet unfortunate. I want to note that we were depending on these baseURL-relative "absolute" paths for several major versions so it is definitely a 'breaking' change.

However since the documentation does not really specify what absolute URLs would be, I can understand that this use-case was not designed to work originally.

[alan-agius4]

Absolute URLs are actually URLs with a host and a protocol example https://example.com/template.html.

As a workaround until you fully migrate to relative paths you can use the legacy build pipeline using the following environment variableNG_BUILD_IVY_LEGACY=1.

Note: the above mentioned environment variable is only a temporary escape hatch and will be removed in a future version.

[oliverguenther]

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.

[alan-agius4]

Glad to help @oliverguenther.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}