Cannot use template literals in template (TS file) #63507
Description
Which @angular/* package(s) are the source of the bug?
compiler
Is this a regression?
No
Description
Template literals work fine in .html template files but fail when the same template is defined inline in .ts files using the template property.
This inconsistency creates confusion and limits the ability to use inline templates with template literals, forcing developers to move templates to separate .html files even for simple components.
Works in .html files:
<h1>{{ `Hello from ${name}!` }}</h1>Fails in .ts files:
@Component({
selector: 'app-root',
template: `
<h1>{{ \`Hello from ${name}!\` }}</h1>
`,
})
export class App {
name = 'Angular';
}Please provide a link to a minimal reproduction of the bug
https://stackblitz.com/edit/stackblitz-starters-zf9zrkuk?file=src%2Fmain.ts
Please provide the exception or error you saw
✘ [ERROR] TS-991010: template must be a string
Value could not be determined statically. [plugin angular-compiler]
src/main.ts:7:12:
7 │ template: `
╵ ^
A string value could not be determined statically.
src/main.ts:8:26:
8 │ <h1>{{ \`Hello from ${name}!\` }}</h1>
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 20.0.0
Node: 20.19.1
Package Manager: npm 10.8.2
OS: linux x64
Angular: 20.0.0
... animations, build, cli, common, compiler, compiler-cli, core
... forms, platform-browser, router
Package Version
------------------------------------------------------
@angular-devkit/architect 0.2000.0
@angular-devkit/core 20.0.0
@angular-devkit/schematics 20.0.0
@schematics/angular 20.0.0
rxjs 7.8.2
typescript 5.8.2
zone.js 0.15.0
Anything else?
No response